github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update text colors

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-02-08 18:23:13 +05:30
parent 52d1db26ea
commit 8dd5776e69
460 changed files with 1468 additions and 1390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/core/src/ui/extensions/code-inline/index.tsx
View File

@ -32,7 +32,7 @@ export const CustomCodeInlineExtension = Mark.create<CodeOptions>({
addOptions() {
return {
HTMLAttributes: {
class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-custom-text-1000",
class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-neutral-text-strong0",
spellcheck: "false",
},
};

2
packages/editor/core/src/ui/mentions/mention-list.tsx
View File

@ -63,7 +63,7 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
}));
return props.items && props.items.length !== 0 ? (
<div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-neutral-component-surface-light p-1 text-sm text-custom-text-300 shadow-custom-shadow-sm">
<div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-neutral-component-surface-light p-1 text-sm text-neutral-text-medium shadow-custom-shadow-sm">
{props.items.length ? (
props.items.map((item, index) => (
<div

2
packages/editor/core/src/ui/read-only/extensions.tsx
View File

@ -45,7 +45,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
},
code: {
HTMLAttributes: {
class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-neutral-text-strong0",
spellcheck: "false",
},
},

2
packages/editor/document-editor/src/ui/components/content-browser.tsx
View File

@ -26,7 +26,7 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
)
)
) : (
<p className="mt-3 text-xs text-custom-text-400">Headings will be displayed here for navigation</p>
<p className="mt-3 text-xs text-neutral-text-subtle">Headings will be displayed here for navigation</p>
)}
</div>
</div>

4
packages/editor/document-editor/src/ui/components/editor-header.tsx
View File

@ -63,7 +63,7 @@ export const EditorHeader = (props: IEditorHeader) => {
<AlertLabel
Icon={Lock}
backgroundColor="bg-neutral-component-surface-dark"
textColor="text-custom-text-300"
textColor="text-neutral-text-medium"
label="Locked"
/>
)}
@ -85,7 +85,7 @@ export const EditorHeader = (props: IEditorHeader) => {
{isSubmitting !== "submitted" && isSubmitting !== "saved" && (
<RefreshCw className="h-4 w-4 stroke-custom-text-300" />
)}
<span className="text-sm text-custom-text-300">
<span className="text-sm text-neutral-text-medium">
{isSubmitting === "submitting" ? "Saving..." : "Saved"}
</span>
</div>

4
packages/editor/document-editor/src/ui/components/info-popover.tsx
View File

@ -49,14 +49,14 @@ export const InfoPopover: React.FC<Props> = (props) => {
{...infoPopoverAttributes.popper}
>
<div className="space-y-1.5">
<h6 className="text-xs text-custom-text-400">Last updated on</h6>
<h6 className="text-xs text-neutral-text-subtle">Last updated on</h6>
<h5 className="flex items-center gap-1 text-sm">
<History className="h-3 w-3" />
{renderDate(new Date(documentDetails.last_updated_at))}
</h5>
</div>
<div className="space-y-1.5">
<h6 className="text-xs text-custom-text-400">Created on</h6>
<h6 className="text-xs text-neutral-text-subtle">Created on</h6>
<h5 className="flex items-center gap-1 text-sm">
<Calendar className="h-3 w-3" />
{renderDate(new Date(documentDetails.created_on))}

2
packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
View File

@ -16,7 +16,7 @@ const InputView = ({
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) => (
<div className="flex flex-col gap-1">
<label className="inline-block font-semibold text-xs text-custom-text-400">{label}</label>
<label className="inline-block font-semibold text-xs text-neutral-text-subtle">{label}</label>
<input
placeholder={placeholder}
onClick={(e) => {

2
packages/editor/document-editor/src/ui/components/links/link-preview.tsx
View File

@ -32,7 +32,7 @@ export const LinkPreview = ({
return (
<div className="absolute left-0 top-0 max-w-max">
<div className="shadow-md items-center rounded p-2 flex gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2 text-custom-text-300 text-xs">
<div className="shadow-md items-center rounded p-2 flex gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2 text-neutral-text-medium text-xs">
<GlobeIcon size={14} className="inline-block" />
<p>{url.length > 40 ? url.slice(0, 40) + "..." : url}</p>
<div className="flex gap-2">

2
packages/editor/document-editor/src/ui/components/summary-popover.tsx
View File

@ -34,7 +34,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
type="button"
ref={setReferenceElement}
className={`grid h-7 w-7 place-items-center rounded ${
sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-neutral-text-medium"
}`}
onClick={() => setSidePeekVisible(!sidePeekVisible)}
>

2
packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
View File

@ -27,7 +27,7 @@ export interface IVerticalDropdownMenuProps {
const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => (
<CustomMenu.MenuItem onClick={action} className="flex items-center gap-2">
<Icon className="h-3 w-3" />
<div className="text-custom-text-300">{label}</div>
<div className="text-neutral-text-medium">{label}</div>
</CustomMenu.MenuItem>
);

8
packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
View File

@ -155,7 +155,7 @@ const IssueSuggestionList = ({
<div className={"flex h-full w-full flex-col"} key={`${section}-container`} id={`${section}-container`}>
<h6
className={
"sticky top-0 z-[10] bg-neutral-component-surface-light px-2 py-1 text-xs font-medium text-custom-text-400"
"sticky top-0 z-[10] bg-neutral-component-surface-light px-2 py-1 text-xs font-medium text-neutral-text-subtle"
}
>
{section}
@ -164,16 +164,16 @@ const IssueSuggestionList = ({
{sectionItems.map((item: IssueSuggestionProps, index: number) => (
<button
className={cn(
`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-neutral-text-medium hover:bg-custom-primary-100/5 hover:text-neutral-text-strong`,
{
"bg-custom-primary-100/5 text-custom-text-100":
"bg-custom-primary-100/5 text-neutral-text-strong":
section === currentSection && index === selectedIndex,
}
)}
key={item.identifier}
onClick={() => selectItem(section, index)}
>
<h5 className="whitespace-nowrap text-xs text-custom-text-300">{item.identifier}</h5>
<h5 className="whitespace-nowrap text-xs text-neutral-text-medium">{item.identifier}</h5>
<PriorityIcon priority={item.priority} />
<div>
<p className="flex-grow truncate text-xs">{item.title}</p>

2
packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
View File

@ -10,7 +10,7 @@ export const IssueWidgetCard = (props) => (
props.selected ? "border-custom-primary-200 border-[2px]" : ""
} w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-neutral-border-medium shadow-custom-shadow-2xs`}
>
<h5 className="h-[20%] text-xs text-custom-text-300 p-2">
<h5 className="h-[20%] text-xs text-neutral-text-medium p-2">
{props.node.attrs.project_identifier}-{props.node.attrs.sequence_id}
</h5>
<div className="relative h-[71%]">

22
packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
View File

@ -85,9 +85,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
type="button"
onClick={item.command}
className={cn(
"grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
"grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
{
"bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
"bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
}
)}
>
@ -102,15 +102,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
type="button"
onClick={item.command}
className={cn(
"grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
"grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
{
"bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
"bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
}
)}
>
<item.icon
className={cn("h-4 w-4", {
"text-custom-text-100": item.isActive(),
"text-neutral-text-strong": item.isActive(),
})}
/>
</button>
@ -123,15 +123,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
type="button"
onClick={item.command}
className={cn(
"grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
"grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
{
"bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
"bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
}
)}
>
<item.icon
className={cn("h-4 w-4", {
"text-custom-text-100": item.isActive(),
"text-neutral-text-strong": item.isActive(),
})}
/>
</button>
@ -144,15 +144,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
type="button"
onClick={item.command}
className={cn(
"grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
"grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
{
"bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
"bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
}
)}
>
<item.icon
className={cn("h-4 w-4", {
"text-custom-text-100": item.isActive(),
"text-neutral-text-strong": item.isActive(),
})}
/>
</button>

6
packages/editor/document-editor/src/ui/tooltip.tsx
View File

@ -51,11 +51,13 @@ export const Tooltip: React.FC<Props> = ({
content={
<div
className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
theme === "custom" ? "bg-neutral-component-surface-light text-custom-text-200" : "bg-black text-gray-400"
theme === "custom"
? "bg-neutral-component-surface-light text-neutral-text-medium"
: "bg-black text-gray-400"
} overflow-hidden break-words ${className}`}
>
{tooltipHeading && (
<h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
<h5 className={`font-medium ${theme === "custom" ? "text-neutral-text-strong" : "text-white"}`}>
{tooltipHeading}
</h5>
)}

2
packages/editor/extensions/src/extensions/slash-commands.tsx
View File

@ -297,7 +297,7 @@ const CommandList = ({ items, command }: { items: CommandItemProps[]; command: a
<button
key={item.key}
className={cn(
`flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-custom-text-100 hover:bg-custom-primary-100/5`,
`flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-neutral-text-strong hover:bg-custom-primary-100/5`,
{
"bg-custom-primary-100/5": index === selectedIndex,
}

28
packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
View File

@ -108,8 +108,8 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
<access.icon
className={`h-3.5 w-3.5 ${
props.commentAccessSpecifier?.accessValue === access.key
? "text-custom-text-100"
: "text-custom-text-400"
? "text-neutral-text-strong"
: "text-neutral-text-subtle"
}`}
strokeWidth={2}
/>
@ -127,15 +127,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
type="button"
onClick={item.command}
className={cn(
"grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
"grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
{
"bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
"bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
}
)}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
"text-neutral-text-strong": item.isActive(),
})}
strokeWidth={2.5}
/>
@ -150,15 +150,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
type="button"
onClick={item.command}
className={cn(
"grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
"grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
{
"bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
"bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
}
)}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
"text-neutral-text-strong": item.isActive(),
})}
strokeWidth={2.5}
/>
@ -173,15 +173,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
type="button"
onClick={item.command}
className={cn(
"grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
"grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
{
"bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
"bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
}
)}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
"text-neutral-text-strong": item.isActive(),
})}
strokeWidth={2.5}
/>
@ -196,15 +196,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
type="button"
onClick={item.command}
className={cn(
"grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
"grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
{
"bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
"bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
}
)}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
"text-neutral-text-strong": item.isActive(),
})}
strokeWidth={2.5}
/>

2
packages/editor/rich-text-editor/Readme.md
View File

@ -41,7 +41,7 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
debouncedUpdatesEnabled={true}
setShouldShowAlert={setShowAlert}
setIsSubmitting={setIsSubmitting}
customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-neutral-text-medium"}
noBorder={!isAllowed}
onChange={(description: Object, description_html: string) => {
setShowAlert(true);

6
packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
View File

@ -123,15 +123,15 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
type="button"
onClick={item.command}
className={cn(
"p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
"p-2 text-neutral-text-medium transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
{
"bg-custom-primary-100/5 text-custom-text-100": item.isActive(),
"bg-custom-primary-100/5 text-neutral-text-strong": item.isActive(),
}
)}
>
<item.icon
className={cn("h-4 w-4", {
"text-custom-text-100": item.isActive(),
"text-neutral-text-strong": item.isActive(),
})}
/>
</button>

8
packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
View File

@ -30,7 +30,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
<button
type="button"
className={cn(
"flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-neutral-component-surface-light active:bg-neutral-component-surface-light",
"flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-light active:bg-neutral-component-surface-light",
{ "bg-neutral-component-surface-light": isOpen }
)}
onClick={() => {
@ -40,7 +40,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
<p className="text-base">↗</p>
<p
className={cn("underline underline-offset-4", {
"text-custom-text-100": editor.isActive("link"),
"text-neutral-text-strong": editor.isActive("link"),
})}
>
Link
@ -60,7 +60,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
ref={inputRef}
type="url"
placeholder="Paste a link"
className="flex-1 border-r border-neutral-border-medium bg-neutral-component-surface-light p-1 text-sm outline-none placeholder:text-custom-text-400"
className="flex-1 border-r border-neutral-border-medium bg-neutral-component-surface-light p-1 text-sm outline-none placeholder:text-neutral-text-subtle"
defaultValue={editor.getAttributes("link").href || ""}
/>
{editor.getAttributes("link").href ? (
@ -76,7 +76,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
</button>
) : (
<button
className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-neutral-component-surface-medium"
className="flex items-center rounded-sm p-1 text-neutral-text-medium transition-all hover:bg-neutral-component-surface-medium"
type="button"
onClick={() => {
onLinkSubmit();

6
packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
View File

@ -48,7 +48,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-neutral-text-medium hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
>
<span>{activeItem?.name}</span>
<ChevronDown className="h-4 w-4" />
@ -65,9 +65,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
setIsOpen(false);
}}
className={cn(
"flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
"flex items-center justify-between rounded-sm px-2 py-1 text-sm text-neutral-text-medium hover:bg-custom-primary-100/5 hover:text-neutral-text-strong",
{
"bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name,
"bg-custom-primary-100/5 text-neutral-text-strong": activeItem.name === item.name,
}
)}
>

14
packages/ui/src/badge/helper.tsx
View File

@ -59,17 +59,17 @@ export const badgeStyling: IBadgeStyling = {
neutral: {
default: `text-custom-background-100 bg-custom-text-100 border border-neutral-border-medium`,
hover: `hover:bg-custom-text-200`,
disabled: `cursor-not-allowed bg-custom-border-200 !text-custom-text-400`,
disabled: `cursor-not-allowed bg-custom-border-200 !text-neutral-text-subtle`,
},
"accent-neutral": {
default: `text-custom-text-200 bg-neutral-component-surface-dark`,
hover: `hover:bg-custom-border-200 hover:text-custom-text-100`,
disabled: `cursor-not-allowed !text-custom-text-400`,
default: `text-neutral-text-medium bg-neutral-component-surface-dark`,
hover: `hover:bg-custom-border-200 hover:text-neutral-text-strong`,
disabled: `cursor-not-allowed !text-neutral-text-subtle`,
},
"outline-neutral": {
default: `text-custom-text-200 bg-neutral-component-surface-light border border-neutral-border-medium`,
hover: `hover:text-custom-text-100 hover:bg-custom-border-200`,
disabled: `cursor-not-allowed !text-custom-text-400`,
default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
hover: `hover:text-neutral-text-strong hover:bg-custom-border-200`,
disabled: `cursor-not-allowed !text-neutral-text-subtle`,
},
success: {

2
packages/ui/src/breadcrumbs/breadcrumbs.tsx
View File

@ -13,7 +13,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
<div key={index} className="flex flex-wrap items-center gap-2.5">
{child}
{index !== React.Children.count(children) - 1 && (
<ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
<ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-neutral-text-subtle" aria-hidden="true" />
)}
</div>
))}

6
packages/ui/src/button/helper.tsx
View File

@ -55,10 +55,10 @@ export const buttonStyling: IButtonStyling = {
disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
},
"neutral-primary": {
default: `text-custom-text-200 bg-neutral-component-surface-light border border-neutral-border-medium`,
default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
hover: `hover:bg-neutral-component-surface-medium`,
pressed: `focus:text-custom-text-300 focus:bg-neutral-component-surface-medium`,
disabled: `cursor-not-allowed !text-custom-text-400`,
pressed: `focus:text-neutral-text-medium focus:bg-neutral-component-surface-medium`,
disabled: `cursor-not-allowed !text-neutral-text-subtle`,
},
"link-primary": {
default: `text-custom-primary-100 bg-neutral-component-surface-light`,

8
packages/ui/src/dropdowns/custom-menu.tsx
View File

@ -132,7 +132,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
if (menuButtonOnClick) menuButtonOnClick();
}}
disabled={disabled}
className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
className={`relative grid place-items-center rounded p-1 text-neutral-text-medium outline-none hover:text-neutral-text-strong ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-neutral-component-surface-dark"
} ${buttonClassName}`}
tabIndex={customButtonTabIndex}
@ -146,10 +146,10 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 ${
open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
open ? "bg-neutral-component-surface-medium text-neutral-text-strong" : "text-neutral-text-medium"
} ${noBorder ? "" : "border border-neutral-border-medium shadow-sm focus:outline-none"} ${
disabled
? "cursor-not-allowed text-custom-text-200"
? "cursor-not-allowed text-neutral-text-medium"
: "cursor-pointer hover:bg-neutral-component-surface-dark"
} ${buttonClassName}`}
onClick={() => {
@ -181,7 +181,7 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
<button
type="button"
className={cn(
"w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
"w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium",
{
"bg-neutral-component-surface-dark": active,
},

12
packages/ui/src/dropdowns/custom-search-select.tsx
View File

@ -87,7 +87,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
type="button"
className={`flex w-full items-center justify-between gap-1 text-xs ${
disabled
? "cursor-not-allowed text-custom-text-200"
? "cursor-not-allowed text-neutral-text-medium"
: "cursor-pointer hover:bg-neutral-component-surface-dark"
} ${customButtonClassName}`}
onClick={openDropdown}
@ -104,7 +104,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
} ${
disabled
? "cursor-not-allowed text-custom-text-200"
? "cursor-not-allowed text-neutral-text-medium"
: "cursor-pointer hover:bg-neutral-component-surface-dark"
} ${buttonClassName}`}
onClick={openDropdown}
@ -126,9 +126,9 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
<Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
<Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
<Combobox.Input
className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search"
@ -170,10 +170,10 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
</Combobox.Option>
))
) : (
<p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
<p className="text-neutral-text-subtle italic py-1 px-1.5">No matches found</p>
)
) : (
<p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
<p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
)}
</div>
{footerOption}

6
packages/ui/src/dropdowns/custom-select.tsx
View File

@ -66,7 +66,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
type="button"
className={`flex items-center justify-between gap-1 text-xs ${
disabled
? "cursor-not-allowed text-custom-text-200"
? "cursor-not-allowed text-neutral-text-medium"
: "cursor-pointer hover:bg-neutral-component-surface-dark"
} ${customButtonClassName}`}
onClick={openDropdown}
@ -83,7 +83,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
} ${
disabled
? "cursor-not-allowed text-custom-text-200"
? "cursor-not-allowed text-neutral-text-medium"
: "cursor-pointer hover:bg-neutral-component-surface-dark"
} ${buttonClassName}`}
onClick={openDropdown}
@ -126,7 +126,7 @@ const Option = (props: ICustomSelectItemProps) => {
value={value}
className={({ active }) =>
cn(
"cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
"cursor-pointer select-none truncate rounded px-1 py-1.5 text-neutral-text-medium",
{
"bg-neutral-component-surface-dark": active,
},

2
packages/ui/src/icons/priority-icon.tsx
View File

@ -68,7 +68,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
"text-orange-500": priority === "high",
"text-yellow-500": priority === "medium",
"text-custom-primary-100": priority === "low",
"text-custom-text-200": priority === "none",
"text-neutral-text-medium": priority === "none",
},
className
)}

4
packages/ui/src/tooltip/tooltip.tsx
View File

@ -47,9 +47,9 @@ export const Tooltip: React.FC<ITooltipProps> = ({
hoverCloseDelay={closeDelay}
content={
<div
className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-neutral-component-surface-light p-2 text-xs text-custom-text-200 shadow-md ${className}`}
className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-neutral-component-surface-light p-2 text-xs text-neutral-text-medium shadow-md ${className}`}
>
{tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
{tooltipHeading && <h5 className="font-medium text-neutral-text-strong">{tooltipHeading}</h5>}
{tooltipContent}
</div>
}

2
space/components/accounts/github-sign-in.tsx
View File

@ -43,7 +43,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
className="w-full"
href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
>
<button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-neutral-border-medium p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-neutral-component-surface-dark">
<button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-neutral-border-medium p-2 text-sm font-medium text-neutral-text-strong duration-300 hover:bg-neutral-component-surface-dark">
<Image
src={theme === "dark" ? githubWhiteImage : githubBlackImage}
height={20}

4
space/components/accounts/onboarding-form.tsx
View File

@ -127,7 +127,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
type="button"
className={`flex w-full items-center justify-between gap-1 rounded-md border border-neutral-border-medium px-3 py-2 text-sm shadow-sm duration-300 focus:outline-none`}
>
<span className={value ? "" : "text-custom-text-400"}>{value || "Select your role..."}</span>
<span className={value ? "" : "text-neutral-text-subtle"}>{value || "Select your role..."}</span>
<ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
</Listbox.Button>
@ -151,7 +151,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-neutral-component-surface-dark" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
} ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
}
>
{({ selected }) => (

4
space/components/issues/board-views/block-downvotes.tsx
View File

@ -1,8 +1,8 @@
"use client";
export const IssueBlockDownVotes = ({ number }: { number: number }) => (
<div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-custom-text-300">
<span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-custom-text-300">
<div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-neutral-text-medium">
<span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-neutral-text-medium">
arrow_upward_alt
</span>
{number}

2
space/components/issues/board-views/block-due-date.tsx
View File

@ -49,7 +49,7 @@ export const IssueBlockDueDate = ({ due_date, group }: { due_date: string; group
const iconDetails = dueDateIconDetails(due_date, group);
return (
<div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs text-custom-text-100">
<div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs text-neutral-text-strong">
<span className={`material-symbols-rounded -my-0.5 text-sm ${iconDetails.className}`}>
{iconDetails.iconName}
</span>

2
space/components/issues/board-views/block-labels.tsx
View File

@ -9,7 +9,7 @@ export const IssueBlockLabels = ({ labels }: any) => (
key={_label?.id}
className="flex flex-shrink-0 cursor-default items-center rounded-md border border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm"
>
<div className="flex items-center gap-1.5 text-custom-text-200">
<div className="flex items-center gap-1.5 text-neutral-text-medium">
<div className="h-2 w-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
<div className="text-xs">{_label?.name}</div>
</div>

2
space/components/issues/board-views/block-state.tsx
View File

@ -9,7 +9,7 @@ export const IssueBlockState = ({ state }: any) => {
if (stateGroup === null) return <></>;
return (
<div className="flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
<div className="flex w-full items-center gap-1.5 text-custom-text-200">
<div className="flex w-full items-center gap-1.5 text-neutral-text-medium">
<StateGroupIcon stateGroup={state.group} color={state.color} />
<div className="text-xs">{state?.name}</div>
</div>

4
space/components/issues/board-views/block-upvotes.tsx
View File

@ -1,8 +1,8 @@
"use client";
export const IssueBlockUpVotes = ({ number }: { number: number }) => (
<div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-custom-text-300">
<span className="material-symbols-rounded !m-0 !p-0 text-base text-custom-text-300">arrow_upward_alt</span>
<div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-neutral-text-medium">
<span className="material-symbols-rounded !m-0 !p-0 text-base text-neutral-text-medium">arrow_upward_alt</span>
{number}
</div>
);

2
space/components/issues/board-views/kanban/block.tsx
View File

@ -46,7 +46,7 @@ export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
return (
<div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-3 py-2 text-sm shadow-custom-shadow-2xs">
{/* id */}
<div className="break-words text-xs text-custom-text-300">
<div className="break-words text-xs text-neutral-text-medium">
{projectStore?.project?.identifier}-{issue?.sequence_id}
</div>

4
space/components/issues/board-views/kanban/header.tsx
View File

@ -22,8 +22,8 @@ export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) =>
<div className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
<StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
</div>
<div className="mr-1 truncate font-semibold capitalize text-custom-text-200">{state?.name}</div>
<span className="flex-shrink-0 rounded-full text-custom-text-300">
<div className="mr-1 truncate font-semibold capitalize text-neutral-text-medium">{state?.name}</div>
<span className="flex-shrink-0 rounded-full text-neutral-text-medium">
{store.issue.getCountOfIssuesByState(state.id)}
</span>
</div>

2
space/components/issues/board-views/kanban/index.tsx
View File

@ -34,7 +34,7 @@ export const IssueKanbanView = observer(() => {
))}
</div>
) : (
<div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-custom-text-200">
<div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-neutral-text-medium">
<Icon iconName="stack" />
No issues in this state
</div>

2
space/components/issues/board-views/list/block.tsx
View File

@ -49,7 +49,7 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
<div className="relative flex items-center gap-10 bg-neutral-component-surface-light p-3">
<div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
{/* id */}
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
<div className="flex-shrink-0 text-xs font-medium text-neutral-text-medium">
{projectStore?.project?.identifier}-{issue?.sequence_id}
</div>
{/* name */}

4
space/components/issues/board-views/list/header.tsx
View File

@ -23,7 +23,9 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
<StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
</div>
<div className="mr-1 font-medium capitalize">{state?.name}</div>
<div className="text-sm font-medium text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
<div className="text-sm font-medium text-neutral-text-medium">
{store.issue.getCountOfIssuesByState(state.id)}
</div>
</div>
);
});

2
space/components/issues/board-views/list/index.tsx
View File

@ -27,7 +27,7 @@ export const IssueListView = observer(() => {
))}
</div>
) : (
<div className="bg-neutral-component-surface-light p-3 text-sm text-custom-text-400">No issues.</div>
<div className="bg-neutral-component-surface-light p-3 text-sm text-neutral-text-subtle">No issues.</div>
)}
</div>
))}

6
space/components/issues/filters/applied-filters/filters-list.tsx
View File

@ -33,7 +33,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
key={filterKey}
className="flex flex-wrap items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 capitalize"
>
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
<span className="text-xs text-neutral-text-medium">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
<div className="flex flex-wrap items-center gap-1">
{filterKey === "priority" && (
<AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
@ -57,7 +57,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
@ -69,7 +69,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
<button
type="button"
onClick={handleRemoveAllFilters}
className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-neutral-text-medium hover:text-neutral-text-medium"
>
Clear all
<X size={12} strokeWidth={2} />

2
space/components/issues/filters/applied-filters/label.tsx
View File

@ -29,7 +29,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
<span className="normal-case">{labelDetails.name}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
onClick={() => handleRemove(labelId)}
>
<X size={10} strokeWidth={2} />

2
space/components/issues/filters/applied-filters/priority.tsx
View File

@ -19,7 +19,7 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
{priority}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
onClick={() => handleRemove(priority)}
>
<X size={10} strokeWidth={2} />

2
space/components/issues/filters/applied-filters/state.tsx
View File

@ -26,7 +26,7 @@ export const AppliedStateFilters: React.FC<Props> = (props) => {
{stateDetails.name}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
onClick={() => handleRemove(stateId)}
>
<X size={10} strokeWidth={2} />

2
space/components/issues/filters/helpers/dropdown.tsx
View File

@ -30,7 +30,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
<>
<Popover.Button as={React.Fragment}>
<Button ref={setReferenceElement} variant="neutral-primary" size="sm">
<div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
<div className={`${open ? "text-neutral-text-strong" : "text-neutral-text-medium"}`}>
<span>{title}</span>
</div>
</Button>

2
space/components/issues/filters/helpers/filter-header.tsx
View File

@ -10,7 +10,7 @@ interface IFilterHeader {
export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
<div className="sticky top-0 flex items-center justify-between gap-2 bg-neutral-component-surface-light">
<div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
<div className="flex-grow truncate text-xs font-medium text-neutral-text-medium">{title}</div>
<button
type="button"
className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-neutral-component-surface-dark"

2
space/components/issues/filters/helpers/filter-option.tsx
View File

@ -28,7 +28,7 @@ export const FilterOption: React.FC<Props> = (props) => {
</div>
<div className="flex items-center gap-2 truncate">
{icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
<div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
<div className="flex-grow truncate text-xs text-neutral-text-medium">{title}</div>
</div>
</button>
);

2
space/components/issues/filters/labels.tsx
View File

@ -67,7 +67,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
)}
</>
) : (
<p className="text-xs italic text-custom-text-400">No matches found</p>
<p className="text-xs italic text-neutral-text-subtle">No matches found</p>
)
) : (
<Loader className="space-y-2">

2
space/components/issues/filters/priority.tsx
View File

@ -42,7 +42,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
/>
))
) : (
<p className="text-xs italic text-custom-text-400">No matches found</p>
<p className="text-xs italic text-neutral-text-subtle">No matches found</p>
)}
</div>
)}

6
space/components/issues/filters/selection.tsx
View File

@ -29,10 +29,10 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
<div className="flex h-full w-full flex-col overflow-hidden">
<div className="bg-neutral-component-surface-light p-2.5 pb-0">
<div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-1.5 py-1 text-xs">
<Search className="text-custom-text-400" size={12} strokeWidth={2} />
<Search className="text-neutral-text-subtle" size={12} strokeWidth={2} />
<input
type="text"
className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-custom-text-400"
className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-neutral-text-subtle"
placeholder="Search"
value={filtersSearchQuery}
onChange={(e) => setFiltersSearchQuery(e.target.value)}
@ -40,7 +40,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
/>
{filtersSearchQuery !== "" && (
<button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
<X className="text-custom-text-300" size={12} strokeWidth={2} />
<X className="text-neutral-text-medium" size={12} strokeWidth={2} />
</button>
)}
</div>

2
space/components/issues/filters/state.tsx
View File

@ -62,7 +62,7 @@ export const FilterState: React.FC<Props> = (props) => {
)}
</>
) : (
<p className="text-xs italic text-custom-text-400">No matches found</p>
<p className="text-xs italic text-neutral-text-subtle">No matches found</p>
)
) : (
<Loader className="space-y-2">

4
space/components/issues/navbar/issue-board-view.tsx
View File

@ -30,8 +30,8 @@ export const NavbarIssueBoardView = observer(() => {
key={viewKey}
className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
viewKey === activeBoard
? `bg-neutral-component-surface-dark text-custom-text-200`
: `text-custom-text-300 hover:bg-neutral-component-surface-dark`
? `bg-neutral-component-surface-dark text-neutral-text-medium`
: `text-neutral-text-medium hover:bg-neutral-component-surface-dark`
}`}
onClick={() => handleCurrentBoardView(viewKey)}
title={viewKey}

2
space/components/issues/navbar/theme.tsx
View File

@ -24,7 +24,7 @@ export const NavbarTheme = observer(() => {
<button
type="button"
onClick={handleTheme}
className="relative grid h-7 w-7 place-items-center rounded bg-neutral-component-surface-light text-custom-text-100 hover:bg-neutral-component-surface-dark"
className="relative grid h-7 w-7 place-items-center rounded bg-neutral-component-surface-light text-neutral-text-strong hover:bg-neutral-component-surface-dark"
>
<span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
</button>

12
space/components/issues/peek-overview/comment/comment-detail-card.tsx
View File

@ -83,7 +83,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
)}
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-neutral-component-surface-dark px-0.5 py-px">
<MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
<MessageSquare className="h-3 w-3 text-neutral-text-medium" aria-hidden="true" strokeWidth={2} />
</span>
</div>
<div className="min-w-0 flex-1">
@ -91,7 +91,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
<div className="text-xs">
{comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
</div>
<p className="mt-0.5 text-xs text-custom-text-200">
<p className="mt-0.5 text-xs text-neutral-text-medium">
<>commented {timeAgo(comment.created_at)}</>
</p>
</div>
@ -156,9 +156,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
<Menu.Button
type="button"
onClick={() => {}}
className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-neutral-component-surface-dark hover:text-custom-text-100"
className="relative grid cursor-pointer place-items-center rounded p-1 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-dark hover:text-neutral-text-strong"
>
<MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
<MoreVertical className="h-4 w-4 text-neutral-text-medium duration-300" strokeWidth={2} />
</Menu.Button>
<Transition
@ -179,7 +179,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
onClick={() => {
setIsEditing(true);
}}
className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark ${
className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
active ? "bg-neutral-component-surface-dark" : ""
}`}
>
@ -194,7 +194,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
<button
type="button"
onClick={handleDelete}
className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark ${
className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
active ? "bg-neutral-component-surface-dark" : ""
}`}
>

2
space/components/issues/peek-overview/comment/comment-reactions.tsx
View File

@ -103,7 +103,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
handleReactionClick(reaction);
});
}}
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
commentReactions?.some(
(r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
)

2
space/components/issues/peek-overview/header.tsx
View File

@ -97,7 +97,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-neutral-component-surface-dark" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
} ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
}
>
{({ selected }) => (

2
space/components/issues/peek-overview/issue-activity.tsx
View File

@ -51,7 +51,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
</>
) : (
<div className="mt-4 flex items-center justify-between gap-2 rounded border border-neutral-border-medium bg-neutral-component-surface-dark px-2 py-2.5">
<p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
<p className="flex gap-2 overflow-hidden break-words text-sm text-neutral-text-medium">
<Icon iconName="lock" className="!text-sm" />
Sign in to add your comment
</p>

2
space/components/issues/peek-overview/issue-details.tsx
View File

@ -13,7 +13,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
return (
<div className="space-y-2">
<h6 className="font-medium text-custom-text-200">
<h6 className="font-medium text-neutral-text-medium">
{issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
</h6>
<h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>

2
space/components/issues/peek-overview/issue-emoji-reactions.tsx
View File

@ -84,7 +84,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
handleReactionClick(reaction);
});
}}
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
? "bg-custom-primary-100/10"
: "bg-neutral-component-surface-dark"

6
space/components/issues/peek-overview/issue-properties.tsx
View File

@ -64,7 +64,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
<div className="w-3/4">
{stateGroup && (
<div className="inline-flex rounded bg-neutral-component-surface-dark px-2.5 py-0.5 text-sm">
<div className="flex items-center gap-1.5 text-left text-custom-text-100">
<div className="flex items-center gap-1.5 text-left text-neutral-text-strong">
<StateGroupIcon stateGroup={state.group} color={state.color} />
{addSpaceIfCamelCase(state?.name ?? "")}
</div>
@ -108,14 +108,14 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
</div>
<div>
{issueDetails.target_date ? (
<div className="flex h-6 items-center gap-1 rounded border border-neutral-border-subtle bg-neutral-component-surface-dark px-2.5 py-1 text-xs text-custom-text-100">
<div className="flex h-6 items-center gap-1 rounded border border-neutral-border-subtle bg-neutral-component-surface-dark px-2.5 py-1 text-xs text-neutral-text-strong">
<span className={`material-symbols-rounded -my-0.5 text-sm ${dueDateIcon.className}`}>
{dueDateIcon.iconName}
</span>
{renderFullDate(issueDetails.target_date)}
</div>
) : (
<span className="text-custom-text-200">Empty</span>
<span className="text-neutral-text-medium">Empty</span>
)}
</div>
</div>

6
space/components/ui/dropdown.tsx
View File

@ -83,7 +83,7 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
}
setOpen((prev) => !prev);
}}
className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-neutral-component-surface-dark ${
className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
isSelected ? "bg-neutral-component-surface-dark" : ""
}`}
>
@ -109,8 +109,8 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
{({ open }) => (
<>
<Popover.Button
className={`group flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-neutral-component-surface-medium hover:text-custom-text-100 focus:outline-none ${
open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
className={`group flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong focus:outline-none ${
open ? "bg-neutral-component-surface-medium text-neutral-text-strong" : "text-neutral-text-medium"
}`}
>
{typeof button === "function" ? button() : button}

2
space/components/ui/reaction-selector.tsx
View File

@ -35,7 +35,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
size === "sm" ? "h-6 w-6" : size === "md" ? "h-7 w-7" : "h-8 w-8"
}`}
>
<Icon iconName="add_reaction" className="scale-125 text-custom-text-100" />
<Icon iconName="add_reaction" className="scale-125 text-neutral-text-strong" />
</span>
</Popover.Button>
<Transition

4
space/components/views/project-details.tsx
View File

@ -55,7 +55,7 @@ export const ProjectDetailsView = observer(() => {
{workspace_slug && <IssuePeekOverview />}
{issueStore?.loader && !issueStore.issues ? (
<div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
<div className="py-10 text-center text-sm text-neutral-text-strong">Loading...</div>
) : (
<>
{issueStore?.error ? (
@ -67,7 +67,7 @@ export const ProjectDetailsView = observer(() => {
</div>
</div>
<h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
<p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
<p className="mt-4 text-neutral-text-medium">The public board does not exist. Please check the URL.</p>
</div>
</div>
) : (

2
space/pages/404.tsx
View File

@ -10,7 +10,7 @@ const Custom404Error = () => (
<Image src={notFoundImage} layout="fill" alt="404- Page not found" />
</div>
<div className="text-xl font-medium">Oops! Something went wrong.</div>
<div className="text-sm text-custom-text-200">
<div className="text-sm text-neutral-text-medium">
Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
temporarily unavailable.
</div>

2
space/pages/onboarding/index.tsx
View File

@ -30,7 +30,7 @@ const OnBoardingPage = () => {
<img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane logo" />
</div>
</div>
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm font-medium text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm font-medium text-neutral-text-strong sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
{user?.email}
</div>
</div>

2
space/pages/project-not-published/index.tsx
View File

@ -12,7 +12,7 @@ const CustomProjectNotPublishedError = () => (
<div className="text-xl font-medium">
Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
</div>
<div className="text-sm text-custom-text-200">
<div className="text-sm text-neutral-text-medium">
If this is your project, login to your workspace to adjust its visibility settings and make it public.
</div>
</div>

9
web/components/account/deactivate-account-modal.tsx
View File

@ -90,13 +90,16 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
<div className="">
<div className="flex items-start gap-x-4">
<div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
<Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
<Trash2
className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600"
aria-hidden="true"
/>
</div>
<div>
<Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
<Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-neutral-text-strong">
Deactivate your account?
</Dialog.Title>
<p className="mt-6 list-disc pr-4 text-base font-normal text-custom-text-200">
<p className="mt-6 list-disc pr-4 text-base font-normal text-neutral-text-medium">
Once deactivated, you can{"'"}t be assigned issues and be billed for your workspace.To
reactivate your account, you will need an invite to a workspace at this email address.
</p>

2
web/components/account/o-auth/github-sign-in.tsx
View File

@ -44,7 +44,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
>
<button
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-neutral-text-strong duration-300 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
}`}
>

2
web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
View File

@ -54,7 +54,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
}}
/>
<span
className={`font-medium text-custom-text-200 ${
className={`font-medium text-neutral-text-medium ${
params.segment
? params.segment === "priority" || params.segment === "state__group"
? "capitalize"

4
web/components/analytics/custom-analytics/main-content.tsx
View File

@ -45,7 +45,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
</div>
) : (
<div className="grid h-full place-items-center p-5">
<div className="space-y-4 text-custom-text-200">
<div className="space-y-4 text-neutral-text-medium">
<p className="text-sm">No matching issues found. Try changing the parameters.</p>
</div>
</div>
@ -63,7 +63,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
)
) : (
<div className="grid h-full place-items-center p-5">
<div className="space-y-4 text-custom-text-200">
<div className="space-y-4 text-neutral-text-medium">
<p className="text-sm">There was some error in fetching the data.</p>
<div className="flex items-center justify-center gap-2">
<Button

8
web/components/analytics/custom-analytics/select-bar.tsx
View File

@ -28,7 +28,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
>
{!isProjectLevel && (
<div>
<h6 className="text-xs text-custom-text-200">Project</h6>
<h6 className="text-xs text-neutral-text-medium">Project</h6>
<Controller
name="project"
control={control}
@ -43,7 +43,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
</div>
)}
<div>
<h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
<h6 className="text-xs text-neutral-text-medium">Measure (y-axis)</h6>
<Controller
name="y_axis"
control={control}
@ -51,7 +51,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
/>
</div>
<div>
<h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
<h6 className="text-xs text-neutral-text-medium">Dimension (x-axis)</h6>
<Controller
name="x_axis"
control={control}
@ -69,7 +69,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
/>
</div>
<div>
<h6 className="text-xs text-custom-text-200">Group</h6>
<h6 className="text-xs text-neutral-text-medium">Group</h6>
<Controller
name="segment"
control={control}

2
web/components/analytics/custom-analytics/select/project.tsx
View File

@ -22,7 +22,7 @@ export const SelectProject: React.FC<Props> = observer((props) => {
query: `${projectDetails?.name} ${projectDetails?.identifier}`,
content: (
<div className="flex items-center gap-2 truncate">
<span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
<span className="text-[0.65rem] text-neutral-text-medium flex-shrink-0">{projectDetails?.identifier}</span>
<span className="flex-grow truncate">{projectDetails?.name}</span>
</div>
),

2
web/components/analytics/custom-analytics/select/segment.tsx
View File

@ -23,7 +23,7 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
label={
<span>
{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
<span className="text-custom-text-200">No value</span>
<span className="text-neutral-text-medium">No value</span>
)}
</span>
}

14
web/components/analytics/custom-analytics/sidebar/projects-list.tsx
View File

@ -39,30 +39,30 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
)}
<h5 className="flex items-center gap-1">
<p className="break-words">{truncateText(project.name, 20)}</p>
<span className="ml-1 text-xs text-custom-text-200">({project.identifier})</span>
<span className="ml-1 text-xs text-neutral-text-medium">({project.identifier})</span>
</h5>
</div>
<div className="mt-4 w-full space-y-3 pl-2">
<div className="flex items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2">
<Users className="text-custom-text-200" size={14} strokeWidth={2} />
<Users className="text-neutral-text-medium" size={14} strokeWidth={2} />
<h6>Total members</h6>
</div>
<span className="text-custom-text-200">{project.total_members}</span>
<span className="text-neutral-text-medium">{project.total_members}</span>
</div>
<div className="flex items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2">
<Contrast className="text-custom-text-200" size={14} strokeWidth={2} />
<Contrast className="text-neutral-text-medium" size={14} strokeWidth={2} />
<h6>Total cycles</h6>
</div>
<span className="text-custom-text-200">{project.total_cycles}</span>
<span className="text-neutral-text-medium">{project.total_cycles}</span>
</div>
<div className="flex items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2">
<LayoutGrid className="text-custom-text-200" size={14} strokeWidth={2} />
<LayoutGrid className="text-neutral-text-medium" size={14} strokeWidth={2} />
<h6>Total modules</h6>
</div>
<span className="text-custom-text-200">{project.total_modules}</span>
<span className="text-neutral-text-medium">{project.total_modules}</span>
</div>
</div>
</div>

14
web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
View File

@ -30,11 +30,11 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
<h4 className="break-words font-medium">Analytics for {cycleDetails.name}</h4>
<div className="mt-4 space-y-4">
<div className="flex items-center gap-2 text-xs">
<h6 className="text-custom-text-200">Lead</h6>
<h6 className="text-neutral-text-medium">Lead</h6>
<span>{cycleOwnerDetails?.display_name}</span>
</div>
<div className="flex items-center gap-2 text-xs">
<h6 className="text-custom-text-200">Start Date</h6>
<h6 className="text-neutral-text-medium">Start Date</h6>
<span>
{cycleDetails.start_date && cycleDetails.start_date !== ""
? renderFormattedDate(cycleDetails.start_date)
@ -42,7 +42,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
</span>
</div>
<div className="flex items-center gap-2 text-xs">
<h6 className="text-custom-text-200">Target Date</h6>
<h6 className="text-neutral-text-medium">Target Date</h6>
<span>
{cycleDetails.end_date && cycleDetails.end_date !== ""
? renderFormattedDate(cycleDetails.end_date)
@ -56,11 +56,11 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
<h4 className="break-words font-medium">Analytics for {moduleDetails.name}</h4>
<div className="mt-4 space-y-4">
<div className="flex items-center gap-2 text-xs">
<h6 className="text-custom-text-200">Lead</h6>
<h6 className="text-neutral-text-medium">Lead</h6>
<span>{moduleDetails.lead_detail?.display_name}</span>
</div>
<div className="flex items-center gap-2 text-xs">
<h6 className="text-custom-text-200">Start Date</h6>
<h6 className="text-neutral-text-medium">Start Date</h6>
<span>
{moduleDetails.start_date && moduleDetails.start_date !== ""
? renderFormattedDate(moduleDetails.start_date)
@ -68,7 +68,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
</span>
</div>
<div className="flex items-center gap-2 text-xs">
<h6 className="text-custom-text-200">Target Date</h6>
<h6 className="text-neutral-text-medium">Target Date</h6>
<span>
{moduleDetails.target_date && moduleDetails.target_date !== ""
? renderFormattedDate(moduleDetails.target_date)
@ -95,7 +95,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
</div>
<div className="mt-4 space-y-4">
<div className="flex items-center gap-2 text-xs">
<h6 className="text-custom-text-200">Network</h6>
<h6 className="text-neutral-text-medium">Network</h6>
<span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span>
</div>
</div>

4
web/components/analytics/custom-analytics/sidebar/sidebar.tsx
View File

@ -147,12 +147,12 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
}`}
>
<div className="flex flex-wrap items-center gap-2">
<div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-custom-text-200">
<div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-neutral-text-medium">
<LayersIcon height={14} width={14} />
{analytics ? analytics.total : "..."} Issues
</div>
{isProjectLevel && (
<div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-custom-text-200">
<div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-neutral-text-medium">
<CalendarDays className="h-3.5 w-3.5" />
{renderFormattedDate(
(cycleId

4
web/components/analytics/custom-analytics/table.tsx
View File

@ -25,7 +25,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
<div className="inline-block min-w-full align-middle">
<table className="min-w-full divide-y divide-neutral-border-medium whitespace-nowrap border-y border-neutral-border-medium">
<thead className="bg-neutral-component-surface-dark">
<tr className="divide-x divide-neutral-border-medium text-sm text-custom-text-100">
<tr className="divide-x divide-neutral-border-medium text-sm text-neutral-text-strong">
<th scope="col" className="px-2.5 py-3 text-left font-medium">
{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
</th>
@ -64,7 +64,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
{barGraphData.data.map((item, index) => (
<tr
key={`table-row-${index}`}
className="divide-x divide-neutral-border-medium text-xs text-custom-text-200"
className="divide-x divide-neutral-border-medium text-xs text-neutral-text-medium"
>
<td
className={`flex items-center gap-2 whitespace-nowrap px-2.5 py-2 font-medium ${

4
web/components/analytics/project-modal/header.tsx
View File

@ -19,14 +19,14 @@ export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) =>
<div className="flex items-center gap-2">
<button
type="button"
className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
className="grid place-items-center p-1 text-neutral-text-medium hover:text-neutral-text-strong"
onClick={() => setFullScreen((prevData) => !prevData)}
>
{fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}
</button>
<button
type="button"
className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
className="grid place-items-center p-1 text-neutral-text-medium hover:text-neutral-text-strong"
onClick={handleClose}
>
<X size={14} strokeWidth={2} />

8
web/components/analytics/scope-and-demand/demand.tsx
View File

@ -13,7 +13,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
<div className="space-y-3 rounded-[10px] border border-neutral-border-medium p-3">
<h5 className="text-xs text-red-500">DEMAND</h5>
<div>
<h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
<h4 className="text-base font-medium text-neutral-text-strong">Total open tasks</h4>
<h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
</div>
<div className="space-y-6">
@ -31,11 +31,11 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
}}
/>
<h6 className="capitalize">{group.state_group}</h6>
<span className="ml-1 rounded-3xl bg-neutral-component-surface-dark px-2 py-0.5 text-[0.65rem] text-custom-text-200">
<span className="ml-1 rounded-3xl bg-neutral-component-surface-dark px-2 py-0.5 text-[0.65rem] text-neutral-text-medium">
{group.state_count}
</span>
</div>
<p className="text-custom-text-200">{percentage}%</p>
<p className="text-neutral-text-medium">{percentage}%</p>
</div>
<div className="bar relative h-1 w-full rounded bg-neutral-component-surface-dark">
<div
@ -51,7 +51,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
})}
</div>
<div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
<p className="flex items-center gap-1 text-custom-text-200">
<p className="flex items-center gap-1 text-neutral-text-medium">
<Triangle className="h-4 w-4" />
<span>Estimate Demand:</span>
</p>

2
web/components/analytics/scope-and-demand/leaderboard.tsx
View File

@ -44,7 +44,7 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
{user.display_name !== "" ? user?.display_name?.[0] : "?"}
</div>
)}
<span className="break-words text-custom-text-200">
<span className="break-words text-neutral-text-medium">
{user.display_name !== "" ? `${user.display_name}` : "No assignee"}
</span>
</div>

2
web/components/analytics/scope-and-demand/scope-and-demand.tsx
View File

@ -92,7 +92,7 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
)
) : (
<div className="grid h-full place-items-center p-5">
<div className="space-y-4 text-custom-text-200">
<div className="space-y-4 text-neutral-text-medium">
<p className="text-sm">There was some error in fetching the data.</p>
<div className="flex items-center justify-center gap-2">
<Button variant="primary" onClick={() => mutateDefaultAnalytics()}>

2
web/components/analytics/scope-and-demand/scope.tsx
View File

@ -30,7 +30,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
return (
<div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
<span className="font-medium text-custom-text-200">
<span className="font-medium text-neutral-text-medium">
{assignee ? assignee.assignees__display_name : "No assignee"}:{" "}
</span>
{datum.value}

2
web/components/analytics/scope-and-demand/year-wise-issues.tsx
View File

@ -37,7 +37,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
sliceTooltip={(datum) => (
<div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
{datum.slice.points[0].data.yFormatted}
<span className="text-custom-text-200"> issues closed in </span>
<span className="text-neutral-text-medium"> issues closed in </span>
{datum.slice.points[0].data.xFormatted}
</div>
)}

4
web/components/api-token/delete-token-modal.tsx
View File

@ -97,12 +97,12 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-neutral-border-medium bg-neutral-component-surface-light text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-3 p-4">
<div className="flex w-full items-center justify-start">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">
<h3 className="text-lg font-medium leading-6 text-neutral-text-strong">
Are you sure you want to delete the token?
</h3>
</div>
<span>
<p className="text-sm text-custom-text-400">
<p className="text-sm text-neutral-text-subtle">
Any application using this token will no longer have the access to Plane data. This action cannot
be undone.
</p>

2
web/components/api-token/empty-state.tsx
View File

@ -19,7 +19,7 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
<div className="flex w-full flex-col items-center text-center">
<Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
<h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No API tokens</h6>
<p className="mb-7 text-custom-text-300 sm:mb-8">
<p className="mb-7 text-neutral-text-medium sm:mb-8">
Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
</p>
<Button className="flex items-center gap-1.5" onClick={onClick}>

8
web/components/api-token/modal/form.tsx
View File

@ -115,7 +115,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
return (
<form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="space-y-4">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">Create token</h3>
<h3 className="text-lg font-medium leading-6 text-neutral-text-strong">Create token</h3>
<div className="space-y-3">
<div>
<Controller
@ -168,7 +168,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
customButton={
<div
className={`flex items-center gap-2 rounded border-[0.5px] border-neutral-border-medium px-2 py-1 ${
neverExpires ? "text-custom-text-400" : ""
neverExpires ? "text-neutral-text-subtle" : ""
}`}
>
<Calendar className="h-3 w-3" />
@ -204,7 +204,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
customDate ? "w-[7.5rem]" : ""
} ${
neverExpires
? "!cursor-not-allowed text-custom-text-400"
? "!cursor-not-allowed text-neutral-text-subtle"
: "hover:bg-neutral-component-surface-dark"
}`}
>
@ -217,7 +217,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
)}
</div>
{!neverExpires && (
<span className="text-xs text-custom-text-400">
<span className="text-xs text-neutral-text-subtle">
{watch("expired_at") === "custom"
? customDate
? `Expires ${renderFormattedDate(customDate)}`

8
web/components/api-token/modal/generated-token-details.tsx
View File

@ -32,8 +32,8 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
return (
<div>
<div className="space-y-3">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
<p className="text-sm text-custom-text-400">
<h3 className="text-lg font-medium leading-6 text-neutral-text-strong">Key created</h3>
<p className="text-sm text-neutral-text-subtle">
Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
containing the key has been downloaded.
</p>
@ -45,11 +45,11 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
>
{tokenDetails.token}
<Tooltip tooltipContent="Copy secret key">
<Copy className="h-4 w-4 text-custom-text-400" />
<Copy className="h-4 w-4 text-neutral-text-subtle" />
</Tooltip>
</button>
<div className="mt-6 flex items-center justify-between">
<p className="text-xs text-custom-text-400">
<p className="text-xs text-neutral-text-subtle">
{tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
</p>
<Button variant="neutral-primary" size="sm" onClick={handleClose}>

4
web/components/api-token/token-list-item.tsx
View File

@ -36,7 +36,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
className={`${
token.is_active
? "bg-green-500/10 text-green-500"
: "bg-neutral-component-surface-dark text-custom-text-400"
: "bg-neutral-component-surface-dark text-neutral-text-subtle"
} ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
>
{token.is_active ? "Active" : "Expired"}
@ -46,7 +46,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
{token.description.trim() !== "" && (
<p className="mb-1 max-w-[70%] break-words text-sm">{token.description}</p>
)}
<p className="mb-1 text-xs leading-6 text-custom-text-400">
<p className="mb-1 text-xs leading-6 text-neutral-text-subtle">
{token.is_active
? token.expired_at
? `Expires ${renderFormattedDate(token.expired_at!)}`

8
web/components/auth-screens/not-authorized-view.tsx
View File

@ -33,14 +33,14 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
alt="ProjectSettingImg"
/>
</div>
<h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
<h1 className="text-xl font-medium text-neutral-text-strong">Oops! You are not authorized to view this page</h1>
<div className="w-full max-w-md text-base text-custom-text-200">
<div className="w-full max-w-md text-base text-neutral-text-medium">
{currentUser ? (
<p>
You have signed in as {currentUser.email}. <br />
<Link href={`/?next_path=${next_path}`}>
<span className="font-medium text-custom-text-100">Sign in</span>
<span className="font-medium text-neutral-text-strong">Sign in</span>
</Link>{" "}
with different account that has access to this page.
</p>
@ -48,7 +48,7 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
<p>
You need to{" "}
<Link href={`/?next_path=${next_path}`}>
<span className="font-medium text-custom-text-100">Sign in</span>
<span className="font-medium text-neutral-text-strong">Sign in</span>
</Link>{" "}
with an account that has access to this page.
</p>

4
web/components/auth-screens/project/join-project.tsx
View File

@ -37,9 +37,9 @@ export const JoinProject: React.FC = () => {
<div className="h-44 w-72">
<Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
</div>
<h1 className="text-xl font-medium text-custom-text-100">You are not a member of this project</h1>
<h1 className="text-xl font-medium text-neutral-text-strong">You are not a member of this project</h1>
<div className="w-full max-w-md text-base text-custom-text-200">
<div className="w-full max-w-md text-base text-neutral-text-medium">
<p className="mx-auto w-full text-sm md:w-3/4">
You are not a member of this project, but you can join this project by clicking the button below.
</p>

2
web/components/auth-screens/workspace/not-a-member.tsx
View File

@ -11,7 +11,7 @@ export const NotAWorkspaceMember = () => (
<div className="space-y-8 text-center">
<div className="space-y-2">
<h3 className="text-lg font-semibold">Not Authorized!</h3>
<p className="mx-auto w-1/2 text-sm text-custom-text-200">
<p className="mx-auto w-1/2 text-sm text-neutral-text-medium">
You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or check
your pending invitations.
</p>

6
web/components/automation/auto-archive-automation.tsx
View File

@ -43,11 +43,11 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
<div className="flex items-center justify-between">
<div className="flex items-start gap-3">
<div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3">
<ArchiveRestore className="h-4 w-4 flex-shrink-0 text-custom-text-100" />
<ArchiveRestore className="h-4 w-4 flex-shrink-0 text-neutral-text-strong" />
</div>
<div className="">
<h4 className="text-sm font-medium">Auto-archive closed issues</h4>
<p className="text-sm tracking-tight text-custom-text-200">
<p className="text-sm tracking-tight text-neutral-text-medium">
Plane will auto archive issues that have been completed or cancelled.
</p>
</div>
@ -90,7 +90,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
<button
type="button"
className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-neutral-component-surface-dark"
className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-neutral-text-medium hover:bg-neutral-component-surface-dark"
onClick={() => setmonthModal(true)}
>
Customise Time Range

8
web/components/automation/auto-close-automation.tsx
View File

@ -73,7 +73,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
</div>
<div className="">
<h4 className="text-sm font-medium">Auto-close issues</h4>
<p className="text-sm tracking-tight text-custom-text-200">
<p className="text-sm tracking-tight text-neutral-text-medium">
Plane will automatically close issue that haven{"'"}t been completed or cancelled.
</p>
</div>
@ -116,7 +116,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
))}
<button
type="button"
className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-neutral-component-surface-dark"
className="flex w-full select-none items-center rounded px-1 py-1.5 text-neutral-text-medium hover:bg-neutral-component-surface-dark"
onClick={() => setmonthModal(true)}
>
Customize Time Range
@ -148,11 +148,11 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
width="16px"
/>
) : (
<DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
<DoubleCircleIcon className="h-3.5 w-3.5 text-neutral-text-medium" />
)}
{selectedOption?.name
? selectedOption.name
: currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
: currentDefaultState?.name ?? <span className="text-neutral-text-medium">State</span>}
</div>
}
onChange={(val: string) => {

10
web/components/automation/select-month-modal.tsx
View File

@ -71,7 +71,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
<Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
Customise Time Range
</Dialog.Title>
<div className="mt-8 flex items-center gap-2">
@ -99,7 +99,9 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
placeholder="Enter Months"
className="w-full border-neutral-border-medium"
/>
<span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
<span className="absolute right-8 top-2.5 text-sm text-neutral-text-medium">
Months
</span>
</div>
)}
/>
@ -131,7 +133,9 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
placeholder="Enter Months"
className="w-full border-neutral-border-medium"
/>
<span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
<span className="absolute right-8 top-2.5 text-sm text-neutral-text-medium">
Months
</span>
</div>
)}
/>

2
web/components/breadcrumbs/index.tsx
View File

@ -19,7 +19,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-sidebar-neutral-border-medium text-center text-sm hover:bg-sidebar-neutral-component-surface-medium"
onClick={() => router.back()}
>
<MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
<MoveLeft className="h-4 w-4 text-sidebar-neutral-text-medium group-hover:text-sidebar-neutral-text-strong" />
</button>
{children}
</div>

10
web/components/command-palette/actions/help-actions.tsx
View File

@ -25,7 +25,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<Rocket className="h-3.5 w-3.5" />
Open keyboard shortcuts
</div>
@ -37,7 +37,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<FileText className="h-3.5 w-3.5" />
Open Plane documentation
</div>
@ -49,7 +49,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
Join our Discord
</div>
@ -61,7 +61,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
Report a bug
</div>
@ -73,7 +73,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<MessageSquare className="h-3.5 w-3.5" />
Chat with us
</div>

12
web/components/command-palette/actions/issue-actions/actions-list.tsx
View File

@ -94,7 +94,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<DoubleCircleIcon className="h-3.5 w-3.5" />
Change state...
</div>
@ -107,7 +107,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<Signal className="h-3.5 w-3.5" />
Change priority...
</div>
@ -120,7 +120,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<UserGroupIcon className="h-3.5 w-3.5" />
Assign to...
</div>
@ -132,7 +132,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
{issueDetails?.assignee_ids.includes(currentUser?.id ?? "") ? (
<>
<UserMinus2 className="h-3.5 w-3.5" />
@ -147,7 +147,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
</div>
</Command.Item>
<Command.Item onSelect={deleteIssue} className="focus:outline-none">
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<Trash2 className="h-3.5 w-3.5" />
Delete issue
</div>
@ -159,7 +159,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<LinkIcon className="h-3.5 w-3.5" />
Copy issue URL
</div>

8
web/components/command-palette/actions/project-actions.tsx
View File

@ -28,7 +28,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<ContrastIcon className="h-3.5 w-3.5" />
Create new cycle
</div>
@ -44,7 +44,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<DiceIcon className="h-3.5 w-3.5" />
Create new module
</div>
@ -60,7 +60,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<PhotoFilterIcon className="h-3.5 w-3.5" />
Create new view
</div>
@ -76,7 +76,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<div className="flex items-center gap-2 text-neutral-text-medium">
<FileText className="h-3.5 w-3.5" />
Create new page
</div>

2
web/components/command-palette/actions/search-results.tsx
View File

@ -34,7 +34,7 @@ export const CommandPaletteSearchResults: React.FC<Props> = (props) => {
value={`${key}-${item?.id}-${item.name}-${item.project__identifier ?? ""}-${item.sequence_id ?? ""}`}
className="focus:outline-none"
>
<div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
<div className="flex items-center gap-2 overflow-hidden text-neutral-text-medium">
{currentSection.icon}
<p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
</div>

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