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

[WEB-5809] refactor: tailwind config inline variables (#8437)

Browse source
This commit is contained in:
Aaryan Khandelwal 2025-12-26 16:36:29 +05:30 • committed by GitHub
parent e3ba7c2889
commit 92ac28fcb8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
169 changed files with 1273 additions and 1130 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/admin/app/(all)/(dashboard)/email/page.tsx
View file

@ -60,7 +60,7 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
Plane can send useful emails to you and your users from your own instance without talking to the Internet. Plane can send useful emails to you and your users from your own instance without talking to the Internet.
<div className="text-13 font-regular text-tertiary"> <div className="text-13 font-regular text-tertiary">
Set it up below and please test your settings before you save them.&nbsp; Set it up below and please test your settings before you save them.&nbsp;
<span className="text-danger">Misconfigs can lead to email bounces and errors.</span> <span className="text-danger-primary">Misconfigs can lead to email bounces and errors.</span>
</div> </div>
</> </>
), ),

10
apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
View file

@ -118,7 +118,7 @@ export function WorkspaceCreateForm() {
/> />
)} )}
/> />
<span className="text-11 text-red-500">{errors?.name?.message}</span> <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
</div> </div>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
@ -153,11 +153,11 @@ export function WorkspaceCreateForm() {
)} )}
/> />
</div> </div>
{slugError && <p className="text-13 text-red-500">This URL is taken. Try something else.</p>} {slugError && <p className="text-13 text-danger-primary">This URL is taken. Try something else.</p>}
{invalidSlug && ( {invalidSlug && (
<p className="text-13 text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p> <p className="text-13 text-danger-primary">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
)} )}
{errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>} {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-13 text-tertiary">How many people will use this workspace?</h4> <h4 className="text-13 text-tertiary">How many people will use this workspace?</h4>
@ -187,7 +187,7 @@ export function WorkspaceCreateForm() {
)} )}
/> />
{errors.organization_size && ( {errors.organization_size && (
<span className="text-13 text-red-500">{errors.organization_size.message}</span> <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
)} )}
</div> </div>
</div> </div>

4
apps/admin/app/(all)/(home)/sign-in-form.tsx
View file

@ -129,7 +129,7 @@ export function InstanceSignInForm() {
<div className="w-full space-y-1"> <div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="email"> <label className="text-13 text-tertiary font-medium" htmlFor="email">
Email <span className="text-red-500">*</span> Email <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder" className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@ -147,7 +147,7 @@ export function InstanceSignInForm() {
<div className="w-full space-y-1"> <div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="password"> <label className="text-13 text-tertiary font-medium" htmlFor="password">
Password <span className="text-red-500">*</span> Password <span className="text-danger-primary">*</span>
</label> </label>
<div className="relative"> <div className="relative">
<Input <Input

10
apps/admin/core/components/common/banner.tsx
View file

@ -10,20 +10,22 @@ export function Banner(props: TBanner) {
return ( return (
<div <div
className={`rounded-md p-2 w-full border ${type === "error" ? "bg-red-500/5 border-red-400" : "bg-green-500/5 border-green-400"}`} className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-primary border-danger-strong" : "bg-success-primary border-success-strong"}`}
> >
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{type === "error" ? ( {type === "error" ? (
<span className="flex items-center justify-center h-6 w-6 rounded-full"> <span className="flex items-center justify-center h-6 w-6 rounded-full">
<AlertCircle className="h-5 w-5 text-red-600" aria-hidden="true" /> <AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
</span> </span>
) : ( ) : (
<CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" /> <CheckCircle2 className="h-5 w-5 text-success-primary" aria-hidden="true" />
)} )}
</div> </div>
<div className="ml-1"> <div className="ml-1">
<p className={`text-13 font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p> <p className={`text-13 font-medium ${type === "error" ? "text-danger-primary" : "text-success-primary"}`}>
{message}
</p>
</div> </div>
</div> </div>
</div> </div>

20
apps/admin/core/components/instance/setup-form.tsx
View file

@ -157,7 +157,7 @@ export function InstanceSetupForm() {
<div className="flex flex-col sm:flex-row items-center gap-4"> <div className="flex flex-col sm:flex-row items-center gap-4">
<div className="w-full space-y-1"> <div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="first_name"> <label className="text-13 text-tertiary font-medium" htmlFor="first_name">
First name <span className="text-red-500">*</span> First name <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder" className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@ -174,7 +174,7 @@ export function InstanceSetupForm() {
</div> </div>
<div className="w-full space-y-1"> <div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="last_name"> <label className="text-13 text-tertiary font-medium" htmlFor="last_name">
Last name <span className="text-red-500">*</span> Last name <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder" className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@ -192,7 +192,7 @@ export function InstanceSetupForm() {
<div className="w-full space-y-1"> <div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="email"> <label className="text-13 text-tertiary font-medium" htmlFor="email">
Email <span className="text-red-500">*</span> Email <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder" className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@ -207,13 +207,13 @@ export function InstanceSetupForm() {
autoComplete="on" autoComplete="on"
/> />
{errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && ( {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
<p className="px-1 text-11 text-red-500">{errorData.message}</p> <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
)} )}
</div> </div>
<div className="w-full space-y-1"> <div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="company_name"> <label className="text-13 text-tertiary font-medium" htmlFor="company_name">
Company name <span className="text-red-500">*</span> Company name <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder" className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@ -229,7 +229,7 @@ export function InstanceSetupForm() {
<div className="w-full space-y-1"> <div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="password"> <label className="text-13 text-tertiary font-medium" htmlFor="password">
Set a password <span className="text-red-500">*</span> Set a password <span className="text-danger-primary">*</span>
</label> </label>
<div className="relative"> <div className="relative">
<Input <Input
@ -267,14 +267,14 @@ export function InstanceSetupForm() {
)} )}
</div> </div>
{errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && ( {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
<p className="px-1 text-11 text-red-500">{errorData.message}</p> <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
)} )}
<PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} /> <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
</div> </div>
<div className="w-full space-y-1"> <div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="confirm_password"> <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
Confirm password <span className="text-red-500">*</span> Confirm password <span className="text-danger-primary">*</span>
</label> </label>
<div className="relative"> <div className="relative">
<Input <Input
@ -311,7 +311,9 @@ export function InstanceSetupForm() {
</div> </div>
{!!formData.confirm_password && {!!formData.confirm_password &&
formData.password !== formData.confirm_password && formData.password !== formData.confirm_password &&
renderPasswordMatchError && <span className="text-13 text-red-500">Passwords don{"'"}t match</span>} renderPasswordMatchError && (
<span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>
)}
</div> </div>
<div className="relative flex gap-2"> <div className="relative flex gap-2">

6
apps/space/core/components/account/auth-forms/email.tsx
View file

@ -52,7 +52,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
<div <div
className={cn( className={cn(
`relative flex items-center rounded-md bg-surface-1 border`, `relative flex items-center rounded-md bg-surface-1 border`,
!isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-subtle` !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-subtle`
)} )}
onFocus={() => { onFocus={() => {
setIsFocused(true); setIsFocused(true);
@ -68,7 +68,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="name@company.com" placeholder="name@company.com"
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`} className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
autoComplete="on" autoComplete="on"
autoFocus autoFocus
ref={inputRef} ref={inputRef}
@ -88,7 +88,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
)} )}
</div> </div>
{emailError?.email && !isFocused && ( {emailError?.email && !isFocused && (
<p className="flex items-center gap-1 text-11 text-red-600 px-0.5"> <p className="flex items-center gap-1 text-11 text-danger-primary px-0.5">
<CircleAlert height={12} width={12} /> <CircleAlert height={12} width={12} />
{emailError.email} {emailError.email}
</p> </p>

2
apps/space/core/components/account/auth-forms/password.tsx
View file

@ -201,7 +201,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
</div> </div>
{!!passwordFormData.confirm_password && {!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password &&
renderPasswordMatchError && <span className="text-13 text-red-500">Passwords don{"'"}t match</span>} renderPasswordMatchError && <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>}
</div> </div>
)} )}

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

@ -116,7 +116,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
autoFocus autoFocus
/> />
<div className="flex w-full items-center justify-between px-1 text-11 pt-1"> <div className="flex w-full items-center justify-between px-1 text-11 pt-1">
<p className="flex items-center gap-1 font-medium text-green-700"> <p className="flex items-center gap-1 font-medium text-success-primary">
<CircleCheck height={12} width={12} /> <CircleCheck height={12} width={12} />
Paste the code sent to your email Paste the code sent to your email
</p> </p>

2
apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
View file

@ -27,7 +27,7 @@ export const IssueBlockDate = observer(function IssueBlockDate(props: Props) {
<Tooltip tooltipHeading="Due Date" tooltipContent={formattedDate}> <Tooltip tooltipHeading="Due Date" tooltipContent={formattedDate}>
<div <div
className={cn("flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-11 text-primary", { className={cn("flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-11 text-primary", {
"text-red-500": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group), "text-danger-primary": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
"border-[0.5px] border-strong": shouldShowBorder, "border-[0.5px] border-strong": shouldShowBorder,
})} })}
> >

2
apps/space/core/components/issues/navbar/user-avatar.tsx
View file

@ -100,7 +100,7 @@ export const UserAvatar = observer(function UserAvatar() {
type="submit" type="submit"
className="flex items-center gap-2 rounded-sm p-2 whitespace-nowrap hover:bg-layer-transparent-hover text-13 min-w-36 cursor-pointer" className="flex items-center gap-2 rounded-sm p-2 whitespace-nowrap hover:bg-layer-transparent-hover text-13 min-w-36 cursor-pointer"
> >
<LogOut size={12} className="shrink-0 text-red-500" /> <LogOut size={12} className="shrink-0 text-danger-primary" />
<div>Sign out</div> <div>Sign out</div>
</button> </button>
</form> </form>

14
apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
View file

@ -132,16 +132,22 @@ export const CommentCard = observer(function CommentCard(props: Props) {
<button <button
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
className="group rounded-sm border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500" className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-green-500"
> >
<Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-on-color" strokeWidth={2} /> <Check
className="h-3 w-3 text-success-primary duration-300 group-hover:text-on-color"
strokeWidth={2}
/>
</button> </button>
<button <button
type="button" type="button"
className="group rounded-sm border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500" className="group rounded-sm border border-danger-strong bg-danger-primary p-2 shadow-md duration-300 hover:bg-danger-primary-hover"
onClick={() => setIsEditing(false)} onClick={() => setIsEditing(false)}
> >
<CloseIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-on-color" strokeWidth={2} /> <CloseIcon
className="h-3 w-3 text-danger-primary duration-300 group-hover:text-on-color"
strokeWidth={2}
/>
</button> </button>
</div> </div>
</form> </form>

2
apps/space/core/components/issues/peek-overview/issue-properties.tsx
View file

@ -114,7 +114,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
{issueDetails.target_date ? ( {issueDetails.target_date ? (
<div <div
className={cn("flex items-center gap-1.5 rounded-sm py-0.5 text-11 text-primary", { className={cn("flex items-center gap-1.5 rounded-sm py-0.5 text-11 text-primary", {
"text-red-500": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group), "text-danger-primary": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
})} })}
> >
<DueDatePropertyIcon className="size-3" /> <DueDatePropertyIcon className="size-3" />

2
apps/space/core/components/issues/peek-overview/layout.tsx
View file

@ -85,7 +85,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 z-20 bg-backdrop bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 z-20 bg-backdrop transition-opacity" />
</Transition.Child> </Transition.Child>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}

2
apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
View file

@ -144,7 +144,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
"flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border focus:outline-none hover:bg-layer-transparent-hover", "flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border focus:outline-none hover:bg-layer-transparent-hover",
votingDimensions, votingDimensions,
{ {
"border-red-600 text-red-600": isDownVotedByUser, "border-danger-strong text-danger-primary": isDownVotedByUser,
"border-strong": !isDownVotedByUser, "border-strong": !isDownVotedByUser,
"cursor-default": isInIframe, "cursor-default": isInIframe,
} }

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

@ -159,7 +159,9 @@ function SecurityPage() {
/> />
)} )}
</div> </div>
{errors.old_password && <span className="text-11 text-red-500">{errors.old_password.message}</span>} {errors.old_password && (
<span className="text-11 text-danger-primary">{errors.old_password.message}</span>
)}
</div> </div>
)} )}
<div className="space-y-1"> <div className="space-y-1">
@ -199,7 +201,9 @@ function SecurityPage() {
</div> </div>
{passwordSupport} {passwordSupport}
{isNewPasswordSameAsOldPassword && !isPasswordInputFocused && ( {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
<span className="text-11 text-red-500">{t("new_password_must_be_different_from_old_password")}</span> <span className="text-11 text-danger-primary">
{t("new_password_must_be_different_from_old_password")}
</span>
)} )}
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
@ -238,7 +242,7 @@ function SecurityPage() {
)} )}
</div> </div>
{!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && ( {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
<span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span> <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
)} )}
</div> </div>
</div> </div>

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

@ -157,7 +157,9 @@ function SecurityPage() {
/> />
)} )}
</div> </div>
{errors.old_password && <span className="text-11 text-red-500">{errors.old_password.message}</span>} {errors.old_password && (
<span className="text-11 text-danger-primary">{errors.old_password.message}</span>
)}
</div> </div>
)} )}
<div className="space-y-1"> <div className="space-y-1">
@ -197,7 +199,9 @@ function SecurityPage() {
</div> </div>
{passwordSupport} {passwordSupport}
{isNewPasswordSameAsOldPassword && !isPasswordInputFocused && ( {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
<span className="text-11 text-red-500">{t("new_password_must_be_different_from_old_password")}</span> <span className="text-11 text-danger-primary">
{t("new_password_must_be_different_from_old_password")}
</span>
)} )}
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
@ -236,7 +240,7 @@ function SecurityPage() {
)} )}
</div> </div>
{!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && ( {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
<span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span> <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
)} )}
</div> </div>
</div> </div>

2
apps/web/app/(all)/profile/sidebar.tsx
View file

@ -249,7 +249,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
<button <button
type="button" type="button"
onClick={handleSignOut} onClick={handleSignOut}
className="flex items-center justify-center gap-2 text-13 font-medium text-red-500" className="flex items-center justify-center gap-2 text-13 font-medium text-danger-primary"
disabled={isSigningOut} disabled={isSigningOut}
> >
<LogOut className="h-3.5 w-3.5" /> <LogOut className="h-3.5 w-3.5" />

4
apps/web/app/error/dev.tsx
View file

@ -46,7 +46,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
<Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none"> <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h2 className="text-20 font-semibold text-red-500 mb-2"> <h2 className="text-20 font-semibold text-danger-primary mb-2">
{error.status} {error.statusText} {error.status} {error.statusText}
</h2> </h2>
<div className="h-px w-full bg-subtle-1" /> <div className="h-px w-full bg-subtle-1" />
@ -80,7 +80,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
<Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none"> <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h2 className="text-20 font-semibold text-red-500 mb-2">Error</h2> <h2 className="text-20 font-semibold text-danger-primary mb-2">Error</h2>
<div className="h-px w-full bg-subtle-1" /> <div className="h-px w-full bg-subtle-1" />
</div> </div>

2
apps/web/ce/components/navigations/top-navigation-root.tsx
View file

@ -63,7 +63,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
<div className="relative"> <div className="relative">
<InboxIcon className="size-5" /> <InboxIcon className="size-5" />
{totalNotifications > 0 && ( {totalNotifications > 0 && (
<span className="absolute -top-0 -right-0 size-2 rounded-full bg-red-500" /> <span className="absolute top-0 right-0 size-2 rounded-full bg-danger-primary" />
)} )}
</div> </div>
), ),

2
apps/web/ce/components/relations/index.tsx
View file

@ -23,7 +23,7 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
blocked_by: { blocked_by: {
key: "blocked_by", key: "blocked_by",
i18n_label: "issue.relation.blocked_by", i18n_label: "issue.relation.blocked_by",
className: "bg-red-500/20 text-red-700", className: "bg-danger-primary text-danger-primary",
icon: (size) => <CircleDot size={size} className="text-secondary" />, icon: (size) => <CircleDot size={size} className="text-secondary" />,
placeholder: "None", placeholder: "None",
}, },

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

@ -51,7 +51,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
<div <div
className={cn( className={cn(
`relative flex items-center rounded-md bg-surface-1 border`, `relative flex items-center rounded-md bg-surface-1 border`,
!isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-strong` !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-strong`
)} )}
onFocus={() => { onFocus={() => {
setIsFocused(true); setIsFocused(true);
@ -88,7 +88,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
)} )}
</div> </div>
{emailError?.email && !isFocused && ( {emailError?.email && !isFocused && (
<p className="flex items-center gap-1 text-11 text-red-600 px-0.5"> <p className="flex items-center gap-1 text-11 text-danger-primary px-0.5">
<CircleAlert height={12} width={12} /> <CircleAlert height={12} width={12} />
{t(emailError.email)} {t(emailError.email)}
</p> </p>

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

@ -119,7 +119,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
)} )}
/> />
{resendTimerCode > 0 && ( {resendTimerCode > 0 && (
<p className="flex items-start w-full gap-1 px-1 text-11 font-medium text-green-700"> <p className="flex items-start w-full gap-1 px-1 text-11 font-medium text-success-primary">
<CircleCheck height={12} width={12} className="mt-0.5" /> <CircleCheck height={12} width={12} className="mt-0.5" />
{t("auth.forgot_password.email_sent")} {t("auth.forgot_password.email_sent")}
</p> </p>

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

@ -124,16 +124,18 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
return ( return (
<> <>
{isBannerMessage && mode === EAuthModes.SIGN_UP && ( {isBannerMessage && mode === EAuthModes.SIGN_UP && (
<div className="relative flex items-center p-2 rounded-md gap-2 border border-red-500/50 bg-red-500/10"> <div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-primary">
<div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center"> <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
<Info size={16} className="text-red-500" /> <Info size={16} className="text-danger-primary" />
</div>
<div className="w-full text-13 font-medium text-danger-primary">
{t("auth.sign_up.errors.password.strength")}
</div> </div>
<div className="w-full text-13 font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
<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-accent-primary/80" className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-primary text-accent-primary/80"
onClick={() => setBannerMessage(false)} onClick={() => setBannerMessage(false)}
> >
<CloseIcon className="w-4 h-4 flex-shrink-0 text-red-500" /> <CloseIcon className="w-4 h-4 flex-shrink-0 text-danger-primary" />
</div> </div>
</div> </div>
)} )}
@ -282,7 +284,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
{!!passwordFormData.confirm_password && {!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password &&
renderPasswordMatchError && ( renderPasswordMatchError && (
<span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span> <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
)} )}
</div> </div>
)} )}

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

@ -185,7 +185,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
{!!resetFormData.confirm_password && {!!resetFormData.confirm_password &&
resetFormData.password !== resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password &&
renderPasswordMatchError && ( renderPasswordMatchError && (
<span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span> <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
)} )}
</div> </div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}> <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>

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

@ -202,7 +202,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
{!!passwordFormData.confirm_password && {!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password &&
renderPasswordMatchError && ( renderPasswordMatchError && (
<span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span> <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
)} )}
</div> </div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}> <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>

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

@ -157,7 +157,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
autoFocus autoFocus
/> />
<div className="flex w-full items-center justify-between px-1 text-11 pt-1"> <div className="flex w-full items-center justify-between px-1 text-11 pt-1">
<p className="flex items-center gap-1 font-medium text-green-700"> <p className="flex items-center gap-1 font-medium text-success-primary">
<CircleCheck height={12} width={12} /> <CircleCheck height={12} width={12} />
{t("auth.common.unique_code.paste_code")} {t("auth.common.unique_code.paste_code")}
</p> </p>

7
apps/web/core/components/account/deactivate-account-modal.tsx
View file

@ -67,8 +67,11 @@ export function DeactivateAccountModal(props: Props) {
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className=""> <div className="">
<div className="flex items-start gap-x-4"> <div className="flex items-start gap-x-4">
<div className="mt-3 grid place-items-center rounded-full bg-red-500/20 p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 "> <div className="mt-3 grid place-items-center rounded-full bg-danger-primary p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
<Trash2 className="h-4 w-4 text-red-600 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6" aria-hidden="true" /> <Trash2
className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
aria-hidden="true"
/>
</div> </div>
<div> <div>
<h3 className="my-4 text-20 font-medium leading-6 text-primary">{t("deactivate_your_account")}</h3> <h3 className="my-4 text-20 font-medium leading-6 text-primary">{t("deactivate_your_account")}</h3>

3
apps/web/core/components/analytics/overview/active-project-item.tsx
View file

@ -16,7 +16,8 @@ type Props = {
}; };
function CompletionPercentage({ percentage }: { percentage: number }) { function CompletionPercentage({ percentage }: { percentage: number }) {
const percentageColor = percentage > 50 ? "bg-green-500/30 text-green-500" : "bg-red-500/30 text-red-500"; const percentageColor =
percentage > 50 ? "bg-success-primary text-success-primary" : "bg-danger-primary text-danger-primary";
return ( return (
<div className={cn("flex items-center gap-2 rounded-sm p-1 text-11", percentageColor)}> <div className={cn("flex items-center gap-2 rounded-sm p-1 text-11", percentageColor)}>
<span>{percentage}%</span> <span>{percentage}%</span>

4
apps/web/core/components/analytics/overview/project-insights.tsx
View file

@ -72,8 +72,8 @@ const ProjectInsights = observer(function ProjectInsights() {
{ {
key: "count", key: "count",
name: "Count", name: "Count",
fill: "var(--color-brand-default)", fill: "var(--text-color-accent-primary)",
stroke: "var(--color-brand-default)", stroke: "var(--text-color-accent-primary)",
fillOpacity: 0.6, fillOpacity: 0.6,
dot: { dot: {
r: 4, r: 4,

12
apps/web/core/components/analytics/trend-piece.tsx
View file

@ -33,19 +33,19 @@ const sizeConfig = {
const variants: Record<NonNullable<Props["variant"]>, Record<"ontrack" | "offtrack" | "atrisk", string>> = { const variants: Record<NonNullable<Props["variant"]>, Record<"ontrack" | "offtrack" | "atrisk", string>> = {
simple: { simple: {
ontrack: "text-green-500", ontrack: "text-success-primary",
offtrack: "text-yellow-500", offtrack: "text-yellow-500",
atrisk: "text-red-500", atrisk: "text-danger-primary",
}, },
outlined: { outlined: {
ontrack: "text-green-500 border border-green-500", ontrack: "text-success-primary border border-success-strong",
offtrack: "text-yellow-500 border border-yellow-500", offtrack: "text-yellow-500 border border-yellow-500",
atrisk: "text-red-500 border border-red-500", atrisk: "text-danger-primary border border-danger-strong",
}, },
tinted: { tinted: {
ontrack: "text-green-500 bg-green-500/10", ontrack: "text-success-primary bg-success-primary",
offtrack: "text-yellow-500 bg-yellow-500/10", offtrack: "text-yellow-500 bg-yellow-500/10",
atrisk: "text-red-500 bg-red-500/10", atrisk: "text-danger-primary bg-danger-primary",
}, },
} as const; } as const;

2
apps/web/core/components/api-token/modal/form.tsx
View file

@ -147,7 +147,7 @@ export function CreateApiTokenForm(props: Props) {
/> />
)} )}
/> />
{errors.label && <span className="text-11 text-red-500">{errors.label.message}</span>} {errors.label && <span className="text-11 text-danger-primary">{errors.label.message}</span>}
</div> </div>
<Controller <Controller
control={control} control={control}

4
apps/web/core/components/api-token/token-list-item.tsx
View file

@ -31,14 +31,14 @@ export function ApiTokenListItem(props: Props) {
className="absolute right-4 hidden place-items-center group-hover:grid" className="absolute right-4 hidden place-items-center group-hover:grid"
data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.LIST_ITEM_DELETE_ICON} data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.LIST_ITEM_DELETE_ICON}
> >
<XCircle className="h-4 w-4 text-red-500" /> <XCircle className="h-4 w-4 text-danger-primary" />
</button> </button>
</Tooltip> </Tooltip>
<div className="flex w-4/5 items-center"> <div className="flex w-4/5 items-center">
<h5 className="truncate text-13 font-medium">{token.label}</h5> <h5 className="truncate text-13 font-medium">{token.label}</h5>
<span <span
className={`${ className={`${
token.is_active ? "bg-green-500/10 text-green-500" : "bg-layer-1 text-placeholder" token.is_active ? "bg-success-primary text-success-primary" : "bg-layer-1 text-placeholder"
} ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`} } ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`}
> >
{token.is_active ? "Active" : "Expired"} {token.is_active ? "Active" : "Expired"}

2
apps/web/core/components/automation/auto-close-automation.tsx
View file

@ -94,7 +94,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="flex items-center justify-center rounded-sm bg-layer-3 p-3"> <div className="flex items-center justify-center rounded-sm bg-layer-3 p-3">
<ArchiveX className="h-4 w-4 flex-shrink-0 text-red-500" /> <ArchiveX className="h-4 w-4 flex-shrink-0 text-danger-primary" />
</div> </div>
<div className=""> <div className="">
<h4 className="text-13 font-medium">{t("project_settings.automations.auto-close.title")}</h4> <h4 className="text-13 font-medium">{t("project_settings.automations.auto-close.title")}</h4>

4
apps/web/core/components/automation/select-month-modal.tsx
View file

@ -76,7 +76,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
/> />
{errors.close_in && ( {errors.close_in && (
<span className="px-1 text-13 text-red-500">Select a month between 1 and 12.</span> <span className="px-1 text-13 text-danger-primary">Select a month between 1 and 12.</span>
)} )}
</> </>
) : ( ) : (
@ -109,7 +109,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
)} )}
/> />
{errors.archive_in && ( {errors.archive_in && (
<span className="px-1 text-13 text-red-500">Select a month between 1 and 12.</span> <span className="px-1 text-13 text-danger-primary">Select a month between 1 and 12.</span>
)} )}
</> </>
)} )}

12
apps/web/core/components/comments/card/edit-form.tsx
View file

@ -114,14 +114,14 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
className={cn( className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300", "group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isDisabled isDisabled
? "cursor-not-allowed border-green-500/50 bg-green-500/10" ? "cursor-not-allowed border-success-strong/50 bg-success-primary"
: "border-green-500 bg-green-500/20 hover:bg-green-500" : "border-success-strong bg-success-primary hover:bg-green-500"
)} )}
> >
<Check <Check
className={cn( className={cn(
"size-4 duration-300", "size-4 duration-300",
isDisabled ? "text-green-500/50" : "text-green-500 group-hover:text-on-color" isDisabled ? "text-success-primary/50" : "text-success-primary group-hover:text-on-color"
)} )}
/> />
</button> </button>
@ -132,8 +132,8 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
className={cn( className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300", "group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isSubmitting isSubmitting
? "cursor-not-allowed border-red-500/50 bg-red-500/10" ? "cursor-not-allowed border-danger-strong/50 bg-danger-primary"
: "border-red-500 bg-red-500/20 hover:bg-red-500" : "border-danger-strong bg-danger-primary hover:bg-red-500"
)} )}
onClick={() => { onClick={() => {
setIsEditing(false); setIsEditing(false);
@ -143,7 +143,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
<CloseIcon <CloseIcon
className={cn( className={cn(
"size-5 duration-300", "size-5 duration-300",
isSubmitting ? "text-red-500/50" : "text-red-500 group-hover:text-on-color" isSubmitting ? "text-danger-primary/50" : "text-danger-primary group-hover:text-on-color"
)} )}
/> />
</button> </button>

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

@ -331,7 +331,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
</div> </div>
</div> </div>
{fileRejections.length > 0 && ( {fileRejections.length > 0 && (
<p className="text-13 text-red-500"> <p className="text-13 text-danger-primary">
{fileRejections[0].errors[0].code === "file-too-large" {fileRejections[0].errors[0].code === "file-too-large"
? "The image size cannot exceed 5 MB." ? "The image size cannot exceed 5 MB."
: "Please upload a file in a valid format."} : "Please upload a file in a valid format."}

13
apps/web/core/components/core/modals/change-email-modal.tsx
View file

@ -154,12 +154,15 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
ref={ref} ref={ref}
hasError={Boolean(errors.email)} hasError={Boolean(errors.email)}
placeholder={changeEmailT("form.email.placeholder")} placeholder={changeEmailT("form.email.placeholder")}
className={cn({ "border-red-500": errors.email }, { "cursor-not-allowed !bg-surface-2": secondStep })} className={cn(
{ "border-danger-strong": errors.email },
{ "cursor-not-allowed !bg-surface-2": secondStep }
)}
disabled={secondStep} disabled={secondStep}
/> />
)} )}
/> />
{errors?.email && <span className="text-11 text-red-500">{errors?.email?.message}</span>} {errors?.email && <span className="text-11 text-danger-primary">{errors?.email?.message}</span>}
</div> </div>
{secondStep && ( {secondStep && (
@ -177,15 +180,15 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
onChange={onChange} onChange={onChange}
ref={ref} ref={ref}
placeholder={changeEmailT("form.code.placeholder")} placeholder={changeEmailT("form.code.placeholder")}
className={cn({ "border-red-500": errors.code })} className={cn({ "border-danger-strong": errors.code })}
autoFocus autoFocus
/> />
)} )}
/> />
{errors?.code ? ( {errors?.code ? (
<span className="text-11 text-red-500">{errors?.code?.message}</span> <span className="text-11 text-danger-primary">{errors?.code?.message}</span>
) : ( ) : (
<span className="text-11 text-green-700">{changeEmailT("form.code.helper_text")}</span> <span className="text-11 text-success-primary">{changeEmailT("form.code.helper_text")}</span>
)} )}
</div> </div>
)} )}

2
apps/web/core/components/core/modals/gpt-assistant-popover.tsx
View file

@ -244,7 +244,7 @@ export function GptAssistantPopover(props: Props) {
</div> </div>
)} )}
{invalidResponse && ( {invalidResponse && (
<div className="text-13 text-red-500"> <div className="text-13 text-danger-primary">
No response could be generated. This may be due to insufficient content or task information. Please try No response could be generated. This may be due to insufficient content or task information. Please try
again. again.
</div> </div>

2
apps/web/core/components/core/modals/user-image-upload-modal.tsx
View file

@ -128,7 +128,7 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
</div> </div>
</div> </div>
{fileRejections.length > 0 && ( {fileRejections.length > 0 && (
<p className="text-13 text-red-500"> <p className="text-13 text-danger-primary">
{fileRejections[0].errors[0].code === "file-too-large" {fileRejections[0].errors[0].code === "file-too-large"
? "The image size cannot exceed 5 MB." ? "The image size cannot exceed 5 MB."
: "Please upload a file in a valid format."} : "Please upload a file in a valid format."}

2
apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
View file

@ -141,7 +141,7 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
</div> </div>
</div> </div>
{fileRejections.length > 0 && ( {fileRejections.length > 0 && (
<p className="text-13 text-red-500"> <p className="text-13 text-danger-primary">
{fileRejections[0].errors[0].code === "file-too-large" {fileRejections[0].errors[0].code === "file-too-large"
? "The image size cannot exceed 5 MB." ? "The image size cannot exceed 5 MB."
: "Please upload a file in a valid format."} : "Please upload a file in a valid format."}

2
apps/web/core/components/cycles/form.tsx
View file

@ -121,7 +121,7 @@ export function CycleForm(props: Props) {
/> />
)} )}
/> />
<span className="text-11 text-red-500">{errors?.name?.message}</span> <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
</div> </div>
<div> <div>
<Controller <Controller

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

@ -93,7 +93,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
onChange(newModuleIds); onChange(newModuleIds);
}} }}
> >
<CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-red-500" /> <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
</button> </button>
</Tooltip> </Tooltip>
)} )}

2
apps/web/core/components/estimates/create/modal.tsx
View file

@ -187,7 +187,7 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
/> />
)} )}
{/* {isEstimatePointError && ( {/* {isEstimatePointError && (
<div className="pt-5 text-13 text-red-500"> <div className="pt-5 text-13 text-danger-primary">
Estimate points can&apos;t be empty. Enter a value in each field or remove those you don&apos;t have Estimate points can&apos;t be empty. Enter a value in each field or remove those you don&apos;t have
values for. values for.
</div> </div>

6
apps/web/core/components/estimates/points/create.tsx
View file

@ -171,7 +171,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
<div <div
className={cn( className={cn(
"relative w-full border rounded-sm flex items-center my-1", "relative w-full border rounded-sm flex items-center my-1",
estimatePointError?.message ? `border-red-500` : `border-subtle` estimatePointError?.message ? `border-danger-strong` : `border-subtle`
)} )}
> >
<EstimateInputRoot <EstimateInputRoot
@ -181,7 +181,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
/> />
{estimatePointError?.message && ( {estimatePointError?.message && (
<Tooltip tooltipContent={estimatePointError?.message} position="bottom"> <Tooltip tooltipContent={estimatePointError?.message} position="bottom">
<div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500"> <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-danger-primary">
<Info size={14} /> <Info size={14} />
</div> </div>
</Tooltip> </Tooltip>
@ -191,7 +191,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
{estimateInputValue && estimateInputValue.length > 0 && ( {estimateInputValue && estimateInputValue.length > 0 && (
<button <button
type="submit" type="submit"
className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-green-500" className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-success-primary"
disabled={loader} disabled={loader}
> >
{loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />} {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}

6
apps/web/core/components/estimates/points/update.tsx
View file

@ -170,7 +170,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
<div <div
className={cn( className={cn(
"relative w-full border rounded-sm flex items-center my-1", "relative w-full border rounded-sm flex items-center my-1",
estimatePointError?.message ? `border-red-500` : `border-subtle` estimatePointError?.message ? `border-danger-strong` : `border-subtle`
)} )}
> >
<EstimateInputRoot <EstimateInputRoot
@ -188,7 +188,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
} }
position="bottom" position="bottom"
> >
<div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500"> <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-danger-primary">
<Info size={14} /> <Info size={14} />
</div> </div>
</Tooltip> </Tooltip>
@ -199,7 +199,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
{estimateInputValue && estimateInputValue.length > 0 && ( {estimateInputValue && estimateInputValue.length > 0 && (
<button <button
type="submit" type="submit"
className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-green-500" className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-success-primary"
disabled={loader} disabled={loader}
> >
{loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />} {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}

6
apps/web/core/components/exporter/column.tsx
View file

@ -72,11 +72,11 @@ export const useExportColumns = () => {
<span <span
className={`rounded-sm text-11 px-2 py-1 capitalize ${ className={`rounded-sm text-11 px-2 py-1 capitalize ${
rowData.status === "completed" rowData.status === "completed"
? "bg-green-500/20 text-green-500" ? "bg-success-primary text-success-primary"
: rowData.status === "processing" : rowData.status === "processing"
? "bg-yellow-500/20 text-yellow-500" ? "bg-yellow-500/20 text-yellow-500"
: rowData.status === "failed" : rowData.status === "failed"
? "bg-red-500/20 text-red-500" ? "bg-danger-primary text-danger-primary"
: rowData.status === "expired" : rowData.status === "expired"
? "bg-orange-500/20 text-orange-500" ? "bg-orange-500/20 text-orange-500"
: "bg-gray-500/20 text-gray-500" : "bg-gray-500/20 text-gray-500"
@ -104,7 +104,7 @@ export const useExportColumns = () => {
)} )}
</> </>
) : ( ) : (
<div className="text-11 text-red-500">Expired</div> <div className="text-11 text-danger-primary">Expired</div>
), ),
}, },
]; ];

6
apps/web/core/components/exporter/single-export.tsx
View file

@ -38,11 +38,11 @@ export function SingleExport({ service, refreshing }: Props) {
<span <span
className={`rounded-sm px-2 py-0.5 text-11 capitalize ${ className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
service.status === "completed" service.status === "completed"
? "bg-green-500/20 text-green-500" ? "bg-success-primary text-success-primary"
: service.status === "processing" : service.status === "processing"
? "bg-yellow-500/20 text-yellow-500" ? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed" : service.status === "failed"
? "bg-red-500/20 text-red-500" ? "bg-danger-primary text-danger-primary"
: service.status === "expired" : service.status === "expired"
? "bg-orange-500/20 text-orange-500" ? "bg-orange-500/20 text-orange-500"
: "" : ""
@ -69,7 +69,7 @@ export function SingleExport({ service, refreshing }: Props) {
)} )}
</> </>
) : ( ) : (
<div className="text-11 text-red-500">Expired</div> <div className="text-11 text-danger-primary">Expired</div>
)} )}
</div> </div>
); );

2
apps/web/core/components/global/timezone-select.tsx
View file

@ -39,7 +39,7 @@ export const TimezoneSelect = observer(function TimezoneSelect(props: TTimezoneS
options={isDisabled || disabled ? [] : timezones} options={isDisabled || disabled ? [] : timezones}
onChange={onChange} onChange={onChange}
buttonClassName={cn(buttonClassName, { buttonClassName={cn(buttonClassName, {
"border-red-500": error, "border-danger-strong": error,
})} })}
className={cn("rounded-md border-[0.5px] !border-subtle", className)} className={cn("rounded-md border-[0.5px] !border-subtle", className)}
optionsClassName={cn("w-72", optionsClassName)} optionsClassName={cn("w-72", optionsClassName)}

2
apps/web/core/components/home/root.tsx
View file

@ -52,7 +52,7 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
return ( return (
<> <>
{currentUserProfile && !currentUserProfile.is_tour_completed && ( {currentUserProfile && !currentUserProfile.is_tour_completed && (
<div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-backdrop bg-opacity-50 transition-opacity overflow-y-auto"> <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-backdrop transition-opacity overflow-y-auto">
<TourRoot onComplete={handleTourCompleted} /> <TourRoot onComplete={handleTourCompleted} />
</div> </div>
)} )}

2
apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
View file

@ -94,7 +94,7 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
/> />
)} )}
/> />
{errors.url && <span className="text-11 text-red-500">{t("link.modal.url.required")}</span>} {errors.url && <span className="text-11 text-danger-primary">{t("link.modal.url.required")}</span>}
</div> </div>
<div> <div>
<label htmlFor="title" className="mb-2 text-secondary text-14 font-medium"> <label htmlFor="title" className="mb-2 text-secondary text-14 font-medium">

4
apps/web/core/components/inbox/content/inbox-issue-header.tsx
View file

@ -314,7 +314,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
<Button <Button
variant="secondary" variant="secondary"
prependIcon={<CircleCheck className="w-3 h-3" />} prependIcon={<CircleCheck className="w-3 h-3" />}
className="text-green-500 border border-green-500 bg-green-500/20 focus:bg-green-500/20 focus:text-green-500 hover:bg-green-500/40 bg-opacity-20" className="text-success-primary border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary"
onClick={() => onClick={() =>
handleActionWithPermission( handleActionWithPermission(
isProjectAdmin, isProjectAdmin,
@ -333,7 +333,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
<Button <Button
variant="secondary" variant="secondary"
prependIcon={<CircleX className="w-3 h-3" />} prependIcon={<CircleX className="w-3 h-3" />}
className="text-red-500 border border-red-500 bg-red-500/20 focus:bg-red-500/20 focus:text-red-500 hover:bg-red-500/40 bg-opacity-20" className="text-danger-primary border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover"
onClick={() => onClick={() =>
handleActionWithPermission( handleActionWithPermission(
isProjectAdmin, isProjectAdmin,

6
apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
View file

@ -177,7 +177,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
) )
} }
> >
<div className="flex items-center gap-2 text-green-500"> <div className="flex items-center gap-2 text-success-primary">
<CircleCheck size={14} strokeWidth={2} /> <CircleCheck size={14} strokeWidth={2} />
Accept Accept
</div> </div>
@ -193,7 +193,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
) )
} }
> >
<div className="flex items-center gap-2 text-red-500"> <div className="flex items-center gap-2 text-danger-primary">
<CircleX size={14} strokeWidth={2} /> <CircleX size={14} strokeWidth={2} />
Decline Decline
</div> </div>
@ -201,7 +201,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
)} )}
{canDelete && !isAcceptedOrDeclined && ( {canDelete && !isAcceptedOrDeclined && (
<CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}> <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
<div className="flex items-center gap-2 text-red-500"> <div className="flex items-center gap-2 text-danger-primary">
<Trash2 size={14} strokeWidth={2} /> <Trash2 size={14} strokeWidth={2} />
Delete Delete
</div> </div>

4
apps/web/core/components/inbox/inbox-status-icon.tsx
View file

@ -16,8 +16,8 @@ export const ICON_PROPERTIES = {
}, },
[EInboxIssueStatus.SNOOZED]: { [EInboxIssueStatus.SNOOZED]: {
icon: Clock, icon: Clock,
textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-placeholder"), textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"),
bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-red-500/10" : "bg-[#E0E1E6]"), bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-primary" : "bg-[#E0E1E6]"),
}, },
[EInboxIssueStatus.ACCEPTED]: { [EInboxIssueStatus.ACCEPTED]: {
icon: CheckCircle2, icon: CheckCircle2,

2
apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
View file

@ -37,7 +37,7 @@ export const InboxIssueTitle = observer(function InboxIssueTitle(props: TInboxIs
required required
/> />
{isTitleLengthMoreThan255Character && ( {isTitleLengthMoreThan255Character && (
<span className="text-11 text-red-500">{t("title_should_be_less_than_255_characters")}</span> <span className="text-11 text-danger-primary">{t("title_should_be_less_than_255_characters")}</span>
)} )}
</div> </div>
); );

4
apps/web/core/components/integration/delete-import-modal.tsx
View file

@ -59,8 +59,8 @@ export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}> <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<div className="flex flex-col gap-6 p-6"> <div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4"> <span className="place-items-center rounded-full bg-danger-primary p-4">
<AlertTriangle className="h-6 w-6 text-red-500" aria-hidden="true" /> <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</span> </span>
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">
<h3 className="text-18 font-medium 2xl:text-20">Delete project</h3> <h3 className="text-18 font-medium 2xl:text-20">Delete project</h3>

6
apps/web/core/components/integration/github/root.tsx
View file

@ -173,10 +173,10 @@ export function GithubImporterRoot() {
<div <div
className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${ className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
index <= activeIntegrationState() index <= activeIntegrationState()
? `border-accent-strong bg-accent-primary ${ ? `border-accent-strong ${
index === activeIntegrationState() index === activeIntegrationState()
? "border-opacity-100 bg-opacity-100" ? "border-opacity-100 bg-accent-primary"
: "border-opacity-80 bg-opacity-80" : "border-opacity-80 bg-accent-primary/80"
}` }`
: "border-subtle" : "border-subtle"
}`} }`}

10
apps/web/core/components/integration/jira/give-details.tsx
View file

@ -59,7 +59,9 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
/> />
)} )}
/> />
{errors.metadata?.api_token && <p className="text-11 text-red-500">{errors.metadata.api_token.message}</p>} {errors.metadata?.api_token && (
<p className="text-11 text-danger-primary">{errors.metadata.api_token.message}</p>
)}
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
@ -88,7 +90,7 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
)} )}
/> />
{errors.metadata?.project_key && ( {errors.metadata?.project_key && (
<p className="text-11 text-red-500">{errors.metadata.project_key.message}</p> <p className="text-11 text-danger-primary">{errors.metadata.project_key.message}</p>
)} )}
</div> </div>
</div> </div>
@ -118,7 +120,7 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
/> />
)} )}
/> />
{errors.metadata?.email && <p className="text-11 text-red-500">{errors.metadata.email.message}</p>} {errors.metadata?.email && <p className="text-11 text-danger-primary">{errors.metadata.email.message}</p>}
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
@ -147,7 +149,7 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
)} )}
/> />
{errors.metadata?.cloud_hostname && ( {errors.metadata?.cloud_hostname && (
<p className="text-11 text-red-500">{errors.metadata.cloud_hostname.message}</p> <p className="text-11 text-danger-primary">{errors.metadata.cloud_hostname.message}</p>
)} )}
</div> </div>
</div> </div>

8
apps/web/core/components/integration/jira/root.tsx
View file

@ -116,12 +116,12 @@ export function JiraImporterRoot() {
index > activeIntegrationState() + 1 || index > activeIntegrationState() + 1 ||
Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter) Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
} }
className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-subtle ${ className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-subtle ${
index <= activeIntegrationState() index <= activeIntegrationState()
? `border-accent-strong bg-accent-primary ${ ? `border-accent-strong ${
index === activeIntegrationState() index === activeIntegrationState()
? "border-opacity-100 bg-opacity-100" ? "border-opacity-100 bg-accent-primary"
: "border-opacity-80 bg-opacity-80" : "border-opacity-80 bg-accent-primary/80"
}` }`
: "border-subtle" : "border-subtle"
}`} }`}

4
apps/web/core/components/integration/single-import.tsx
View file

@ -35,11 +35,11 @@ export const SingleImport = observer(function SingleImport({ service, refreshing
<span <span
className={`rounded-sm px-2 py-0.5 text-11 capitalize ${ className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
service.status === "completed" service.status === "completed"
? "bg-green-500/20 text-green-500" ? "bg-success-primary text-success-primary"
: service.status === "processing" : service.status === "processing"
? "bg-yellow-500/20 text-yellow-500" ? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed" : service.status === "failed"
? "bg-red-500/20 text-red-500" ? "bg-danger-primary text-danger-primary"
: "" : ""
}`} }`}
> >

2
apps/web/core/components/integration/single-integration-card.tsx
View file

@ -114,7 +114,7 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
<h3 className="flex items-center gap-2 text-body-xs-medium"> <h3 className="flex items-center gap-2 text-body-xs-medium">
{integration.title} {integration.title}
{workspaceIntegrations {workspaceIntegrations
? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-green-500" /> ? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-success-primary" />
: null} : null}
</h3> </h3>
<p className="text-body-xs-regular text-secondary"> <p className="text-body-xs-regular text-secondary">

4
apps/web/core/components/issues/attachment/attachment-upload.tsx
View file

@ -47,14 +47,14 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
{...getRootProps()} {...getRootProps()}
className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${ className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${
isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle" isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle"
} ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`} } ${isDragReject ? "bg-danger-subtle" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
> >
<input {...getInputProps()} /> <input {...getInputProps()} />
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
{isDragActive ? ( {isDragActive ? (
<p>Drop here...</p> <p>Drop here...</p>
) : fileError ? ( ) : fileError ? (
<p className="text-center text-red-500">{fileError}</p> <p className="text-center text-danger-primary">{fileError}</p>
) : isLoading ? ( ) : isLoading ? (
<p className="text-center">Uploading...</p> <p className="text-center">Uploading...</p>
) : ( ) : (

4
apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
View file

@ -143,7 +143,7 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
isClearable isClearable
mergeDates mergeDates
buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"} buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlight ? "text-red-500" : ""} buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
disabled={!canEdit} disabled={!canEdit}
showTooltip showTooltip
customTooltipHeading="Date Range" customTooltipHeading="Date Range"
@ -187,7 +187,7 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
placeholder={t("common.order_by.due_date")} placeholder={t("common.order_by.due_date")}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />} icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"} buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlight ? "text-red-500" : ""} buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
clearIconClassName="text-primary" clearIconClassName="text-primary"
optionsClassName="z-30" optionsClassName="z-30"
disabled={!canEdit} disabled={!canEdit}

2
apps/web/core/components/issues/issue-detail/identifier-text.tsx
View file

@ -16,7 +16,7 @@ const VARIANT_MAP: Record<TIdentifierTextVariant, string> = {
tertiary: "text-tertiary", tertiary: "text-tertiary",
primary: "text-primary", primary: "text-primary",
"primary-subtle": "text-primary/80", "primary-subtle": "text-primary/80",
success: "text-success", success: "text-success-primary",
}; };
export function IdentifierText(props: TIdentifierTextProps) { export function IdentifierText(props: TIdentifierTextProps) {

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

@ -34,7 +34,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
<Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}> <Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}>
<LabelFilledIcon className="size-3" color={label.color ?? "#000000"} /> <LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
<span className="text-body-xs-regular">{label.name}</span> <span className="text-body-xs-regular">{label.name}</span>
{!disabled && <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger" />} {!disabled && <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger-primary" />}
</Button> </Button>
); );
}); });

4
apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
View file

@ -100,7 +100,9 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
/> />
)} )}
/> />
{errors.url && <span className="text-caption-sm-regular text-danger">{t("common.url_is_invalid")}</span>} {errors.url && (
<span className="text-caption-sm-regular text-danger-primary">{t("common.url_is_invalid")}</span>
)}
</div> </div>
<div> <div>
<label htmlFor="title" className="mb-2 text-secondary"> <label htmlFor="title" className="mb-2 text-secondary">

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

@ -109,7 +109,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId); handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId);
}} }}
> >
<CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger" /> <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
</span> </span>
</Tooltip> </Tooltip>
)} )}

2
apps/web/core/components/issues/issue-detail/parent/root.tsx
View file

@ -93,7 +93,7 @@ export const IssueParentDetail = observer(function IssueParentDetail(props: TIss
<CustomMenu.MenuItem <CustomMenu.MenuItem
onClick={() => issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })} onClick={() => issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })}
className="flex items-center gap-2 py-2 text-red-500" className="flex items-center gap-2 py-2 text-danger-primary"
> >
<MinusCircle className="h-4 w-4" /> <MinusCircle className="h-4 w-4" />
<span>{t("issue.remove.parent.label")}</span> <span>{t("issue.remove.parent.label")}</span>

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

@ -139,7 +139,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId); removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
}} }}
> >
<CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger" /> <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
</span> </span>
</Tooltip> </Tooltip>
)} )}

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

@ -173,7 +173,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
buttonContainerClassName="w-full text-left h-7.5" buttonContainerClassName="w-full text-left h-7.5"
buttonClassName={cn("text-body-xs-regular", { buttonClassName={cn("text-body-xs-regular", {
"text-placeholder": !issue.target_date, "text-placeholder": !issue.target_date,
"text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group), "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
})} })}
hideIcon hideIcon
clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary" clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"

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

@ -48,7 +48,7 @@ export function GroupDragOverlay(props: Props) {
`absolute top-0 left-0 h-full w-full items-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`, `absolute top-0 left-0 h-full w-full items-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`,
{ {
"flex flex-col border-[1px] border-strong z-[2]": shouldOverlayBeVisible, "flex flex-col border-[1px] border-strong z-[2]": shouldOverlayBeVisible,
"bg-red-200/60": workflowDisabledSource && isDropDisabled, "bg-danger-primary": workflowDisabledSource && isDropDisabled,
}, },
{ hidden: !shouldOverlayBeVisible } { hidden: !shouldOverlayBeVisible }
)} )}

2
apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View file

@ -257,7 +257,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
<div <div
className={`${ className={`${
isDragging ? `opacity-100` : `opacity-0` isDragging ? `opacity-100` : `opacity-0`
} flex w-full items-center justify-center rounded-sm border-2 border-red-500/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-red-500 ${ } flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-danger-primary ${
isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : "" isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
} transition duration-300`} } transition duration-300`}
> >

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

@ -119,7 +119,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
</div> </div>
<Tooltip tooltipContent={issue.name} isMobile={isMobile} renderByDefault={false}> <Tooltip tooltipContent={issue.name} isMobile={isMobile} renderByDefault={false}>
<div className="w-full line-clamp-1 text-14 text-primary"> <div className="w-full line-clamp-1 text-body-sm-medium text-primary">
<span>{issue.name}</span> <span>{issue.name}</span>
</div> </div>
</Tooltip> </Tooltip>

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

@ -276,7 +276,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
disabled={isCurrentBlockDragging} disabled={isCurrentBlockDragging}
renderByDefault={false} renderByDefault={false}
> >
<p className="truncate cursor-pointer text-body-xs-regular text-primary">{issue.name}</p> <p className="truncate cursor-pointer text-body-xs-medium text-primary">{issue.name}</p>
</Tooltip> </Tooltip>
{isEpic && displayProperties && ( {isEpic && displayProperties && (
<WithDisplayPropertiesHOC <WithDisplayPropertiesHOC

14
apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
View file

@ -298,8 +298,10 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
isClearable isClearable
mergeDates mergeDates
buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"} buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""} buttonClassName={
clearIconClassName="!text-primary" shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
}
clearIconClassName="text-primary!"
disabled={isReadOnly} disabled={isReadOnly}
renderByDefault={isMobile} renderByDefault={isMobile}
showTooltip showTooltip
@ -344,10 +346,12 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
onChange={handleTargetDate} onChange={handleTargetDate}
minDate={minDate} minDate={minDate}
placeholder={t("common.order_by.due_date")} placeholder={t("common.order_by.due_date")}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />} icon={<DueDatePropertyIcon className="h-3 w-3 shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"} buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""} buttonClassName={
clearIconClassName="!text-primary" shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
}
clearIconClassName="text-primary!"
optionsClassName="z-10" optionsClassName="z-10"
disabled={isReadOnly} disabled={isReadOnly}
renderByDefault={isMobile} renderByDefault={isMobile}

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

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

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

@ -150,7 +150,7 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
<div <div
className={cn( className={cn(
containerClassName, containerClassName,
errors && errors?.name && errors?.name?.message ? `border-red-500 bg-red-500/10` : `` errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-primary` : ``
)} )}
> >
{isOpen ? ( {isOpen ? (

2
apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View file

@ -48,7 +48,7 @@ export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColu
buttonClassName={cn( buttonClassName={cn(
"rounded-none text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/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), "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
} }
)} )}
optionsClassName="z-[9]" optionsClassName="z-[9]"

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

@ -72,7 +72,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: TIssueTi
/> />
)} )}
/> />
<span className="text-caption-sm-medium text-red-500">{errors?.name?.message}</span> <span className="text-caption-sm-medium text-danger-primary">{errors?.name?.message}</span>
</div> </div>
); );
}); });

2
apps/web/core/components/issues/peek-overview/properties.tsx
View file

@ -174,7 +174,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
buttonContainerClassName="w-full text-left h-7.5" buttonContainerClassName="w-full text-left h-7.5"
buttonClassName={cn("text-body-xs-medium", { buttonClassName={cn("text-body-xs-medium", {
"text-placeholder": !issue.target_date, "text-placeholder": !issue.target_date,
"text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group), "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
})} })}
hideIcon hideIcon
clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary" clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"

4
apps/web/core/components/issues/preview-card/date.tsx
View file

@ -23,7 +23,7 @@ export function WorkItemPreviewCardDate(props: Props) {
{isDateRangeEnabled ? ( {isDateRangeEnabled ? (
<div <div
className={cn("h-full flex items-center gap-1", { className={cn("h-full flex items-center gap-1", {
"text-red-500": shouldHighlightDate, "text-danger-primary": shouldHighlightDate,
})} })}
> >
<CalendarDays className="shrink-0 size-3" /> <CalendarDays className="shrink-0 size-3" />
@ -39,7 +39,7 @@ export function WorkItemPreviewCardDate(props: Props) {
) : ( ) : (
<div <div
className={cn("h-full flex items-center gap-1", { className={cn("h-full flex items-center gap-1", {
"text-red-500": shouldHighlightDate, "text-danger-primary": shouldHighlightDate,
})} })}
> >
<DueDatePropertyIcon className="shrink-0 size-3" /> <DueDatePropertyIcon className="shrink-0 size-3" />

10
apps/web/core/components/issues/title-input.tsx
View file

@ -147,7 +147,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
className={cn( className={cn(
"block w-full resize-none overflow-hidden rounded-sm border-none bg-transparent px-3 py-0 text-20 font-medium outline-none ring-0", "block w-full resize-none overflow-hidden rounded-sm border-none bg-transparent px-3 py-0 text-20 font-medium outline-none ring-0",
{ {
"ring-1 ring-red-400 mx-2.5": title?.length === 0, "ring-1 ring-danger-strong mx-2.5": title?.length === 0,
}, },
className className
)} )}
@ -167,11 +167,15 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
} }
)} )}
> >
<span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span> <span className={`${title.length === 0 || title.length > 255 ? "text-danger-primary" : ""}`}>
{title.length}
</span>
/255 /255
</div> </div>
</div> </div>
{title?.length === 0 && <span className="text-13 font-medium text-red-500">{t("form.title.required")}</span>} {title?.length === 0 && (
<span className="text-13 font-medium text-danger-primary">{t("form.title.required")}</span>
)}
</div> </div>
); );
}); });

2
apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
View file

@ -193,7 +193,7 @@ export const DraftIssueProperties = observer(function DraftIssueProperties(props
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />} icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"} buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={ buttonClassName={
shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-red-500" : "" shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-danger-primary" : ""
} }
clearIconClassName="!text-primary" clearIconClassName="!text-primary"
optionsClassName="z-10" optionsClassName="z-10"

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

@ -273,7 +273,7 @@ export const CreateUpdateLabelInline = observer(
{isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")} {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
</Button> </Button>
</div> </div>
{errors.name?.message && <p className="p-0.5 pl-8 text-13 text-red-500">{errors.name?.message}</p>} {errors.name?.message && <p className="p-0.5 pl-8 text-13 text-danger-primary">{errors.name?.message}</p>}
</> </>
); );
}) })

2
apps/web/core/components/modules/form.tsx
View file

@ -132,7 +132,7 @@ export function ModuleForm(props: Props) {
/> />
)} )}
/> />
<span className="text-11 text-red-500">{errors?.name?.message}</span> <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
</div> </div>
<div> <div>
<Controller <Controller

8
apps/web/core/components/modules/select/status.tsx
View file

@ -31,14 +31,16 @@ export function ModuleStatusSelect({ control, error, tabIndex }: Props) {
<CustomSelect <CustomSelect
value={value} value={value}
label={ label={
<div className={`flex items-center justify-center gap-2 text-11 py-0.5 ${error ? "text-red-500" : ""}`}> <div
className={`flex items-center justify-center gap-2 text-11 py-0.5 ${error ? "text-danger-primary" : ""}`}
>
{value ? ( {value ? (
<ModuleStatusIcon status={value} /> <ModuleStatusIcon status={value} />
) : ( ) : (
<StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-secondary"}`} /> <StatePropertyIcon className={`h-3 w-3 ${error ? "text-danger-primary" : "text-secondary"}`} />
)} )}
{(selectedValue && t(selectedValue?.i18n_label)) ?? ( {(selectedValue && t(selectedValue?.i18n_label)) ?? (
<span className={`${error ? "text-red-500" : "text-secondary"}`}>Status</span> <span className={`${error ? "text-danger-primary" : "text-secondary"}`}>Status</span>
)} )}
</div> </div>
} }

4
apps/web/core/components/navigation/customize-navigation-dialog.tsx
View file

@ -324,12 +324,12 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
"text-secondary", "text-secondary",
parseInt(projectCountInput) >= 1 parseInt(projectCountInput) >= 1
? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong" ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong"
: "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500" : "border-danger-strong focus:border-danger-strong focus:ring-1 focus:ring-danger-strong"
)} )}
/> />
</div> </div>
{parseInt(projectCountInput) < 1 && projectCountInput !== "" && ( {parseInt(projectCountInput) < 1 && projectCountInput !== "" && (
<span className="text-11 text-red-500 pl-0.5">Minimum value is 1</span> <span className="text-11 text-danger-primary pl-0.5">Minimum value is 1</span>
)} )}
</div> </div>
</div> </div>

20
apps/web/core/components/onboarding/create-workspace.tsx
View file

@ -149,7 +149,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
<form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}> <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
<div className="space-y-1"> <div className="space-y-1">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="name" htmlFor="name"
> >
{t("workspace_creation.form.name.label")} {t("workspace_creation.form.name.label")}
@ -189,11 +189,11 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
</div> </div>
)} )}
/> />
{errors.name && <span className="text-13 text-red-500">{errors.name.message}</span>} {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="slug" htmlFor="slug"
> >
{t("workspace_creation.form.url.label")} {t("workspace_creation.form.url.label")}
@ -211,7 +211,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
render={({ field: { value, ref, onChange } }) => ( render={({ field: { value, ref, onChange } }) => (
<div <div
className={`relative flex items-center rounded-md border-[0.5px] px-3 ${ className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
invalidSlug ? "border-red-500" : "border-strong" invalidSlug ? "border-danger-strong" : "border-strong"
}`} }`}
> >
<span className="whitespace-nowrap text-13">{window && window.location.host}/</span> <span className="whitespace-nowrap text-13">{window && window.location.host}/</span>
@ -235,17 +235,19 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
/> />
<p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p> <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
{slugError && ( {slugError && (
<p className="-mt-3 text-13 text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p> <p className="-mt-3 text-13 text-danger-primary">
{t("workspace_creation.errors.validation.url_already_taken")}
</p>
)} )}
{invalidSlug && ( {invalidSlug && (
<p className="text-13 text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p> <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
)} )}
{errors.slug && <span className="text-13 text-red-500">{errors.slug.message}</span>} {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
</div> </div>
<hr className="w-full border-strong" /> <hr className="w-full border-strong" />
<div className="space-y-1"> <div className="space-y-1">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="organization_size" htmlFor="organization_size"
> >
{t("workspace_creation.form.organization_size.label")} {t("workspace_creation.form.organization_size.label")}
@ -278,7 +280,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
)} )}
/> />
{errors.organization_size && ( {errors.organization_size && (
<span className="text-13 text-red-500">{errors.organization_size.message}</span> <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
)} )}
</div> </div>
</div> </div>

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

@ -250,7 +250,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
{email && !emailRegex.test(email) && ( {email && !emailRegex.test(email) && (
<div className="mx-8 my-1"> <div className="mx-8 my-1">
<span className="text-13">🤥</span>{" "} <span className="text-13">🤥</span>{" "}
<span className="mt-1 text-11 text-red-500">That doesn{"'"}t look like an email address.</span> <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
</div> </div>
)} )}
</div> </div>

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

@ -338,7 +338,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-1"> <div className="space-y-1">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="first_name" htmlFor="first_name"
> >
First name First name
@ -369,11 +369,13 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
/> />
)} )}
/> />
{errors.first_name && <span className="text-13 text-red-500">{errors.first_name.message}</span>} {errors.first_name && (
<span className="text-13 text-danger-primary">{errors.first_name.message}</span>
)}
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="last_name" htmlFor="last_name"
> >
Last name Last name
@ -403,7 +405,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
/> />
)} )}
/> />
{errors.last_name && <span className="text-13 text-red-500">{errors.last_name.message}</span>} {errors.last_name && <span className="text-13 text-danger-primary">{errors.last_name.message}</span>}
</div> </div>
</div> </div>
@ -490,7 +492,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
)} )}
/> />
{errors.confirm_password && ( {errors.confirm_password && (
<span className="text-13 text-red-500">{errors.confirm_password.message}</span> <span className="text-13 text-danger-primary">{errors.confirm_password.message}</span>
)} )}
</div> </div>
</> </>
@ -503,7 +505,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
<> <>
<div className="space-y-1"> <div className="space-y-1">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="role" htmlFor="role"
> >
What role are you working on? Choose one. What role are you working on? Choose one.
@ -534,11 +536,11 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
</div> </div>
)} )}
/> />
{errors.role && <span className="text-13 text-red-500">{errors.role.message}</span>} {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="use_case" htmlFor="use_case"
> >
What is your domain expertise? Choose one or more. What is your domain expertise? Choose one or more.
@ -576,7 +578,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
</div> </div>
)} )}
/> />
{errors.use_case && <span className="text-13 text-red-500">{errors.use_case.message}</span>} {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
</div> </div>
</> </>
)} )}

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

@ -202,7 +202,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
{/* Name Input */} {/* Name Input */}
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label <label
className="block text-13 font-medium text-tertiary after:content-['*'] after:ml-0.5 after:text-red-500" className="block text-13 font-medium text-tertiary after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="first_name" htmlFor="first_name"
> >
Name Name
@ -230,7 +230,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
"w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200", "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
{ {
"border-strong": !errors.first_name, "border-strong": !errors.first_name,
"border-red-500": errors.first_name, "border-danger-strong": errors.first_name,
} }
)} )}
placeholder="Enter your full name" placeholder="Enter your full name"
@ -238,7 +238,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
/> />
)} )}
/> />
{errors.first_name && <span className="text-13 text-red-500">{errors.first_name.message}</span>} {errors.first_name && <span className="text-13 text-danger-primary">{errors.first_name.message}</span>}
</div> </div>
{/* setting up password for the first time */} {/* setting up password for the first time */}

4
apps/web/core/components/onboarding/steps/profile/set-password.tsx
View file

@ -118,8 +118,8 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
placeholder="Confirm password" placeholder="Confirm password"
className="transition-all duration-200" className="transition-all duration-200"
/> />
{hasPasswordMismatch && <p className="text-11 text-red-500 mt-1">Passwords do not match</p>} {hasPasswordMismatch && <p className="text-11 text-danger-primary mt-1">Passwords do not match</p>}
{isPasswordValid && <p className="text-11 text-green-500 mt-1">✓ Passwords match</p>} {isPasswordValid && <p className="text-11 text-success-primary mt-1">✓ Passwords match</p>}
</div> </div>
</div> </div>
</div> </div>

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

@ -153,7 +153,7 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
</div> </div>
)} )}
/> />
{errors.role && <span className="text-13 text-red-500">{errors.role.message}</span>} {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
</div> </div>
{/* Action Buttons */} {/* Action Buttons */}
<div className="space-y-3"> <div className="space-y-3">

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

@ -251,7 +251,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
{email && !emailRegex.test(email) && ( {email && !emailRegex.test(email) && (
<div className="mx-8 my-1"> <div className="mx-8 my-1">
<span className="text-13">🤥</span>{" "} <span className="text-13">🤥</span>{" "}
<span className="mt-1 text-11 text-red-500">That doesn{"'"}t look like an email address.</span> <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
</div> </div>
)} )}
</div> </div>

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

@ -155,7 +155,7 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
</div> </div>
)} )}
/> />
{errors.use_case && <span className="text-13 text-red-500">{errors.use_case.message}</span>} {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
</div> </div>
{/* Action Buttons */} {/* Action Buttons */}

22
apps/web/core/components/onboarding/steps/workspace/create.tsx
View file

@ -145,7 +145,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="name" htmlFor="name"
> >
{t("workspace_creation.form.name.label")} {t("workspace_creation.form.name.label")}
@ -182,7 +182,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
"w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200", "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
{ {
"border-strong": !errors.name, "border-strong": !errors.name,
"border-red-500": errors.name, "border-danger-strong": errors.name,
} }
)} )}
// eslint-disable-next-line jsx-a11y/no-autofocus // eslint-disable-next-line jsx-a11y/no-autofocus
@ -191,11 +191,11 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
</div> </div>
)} )}
/> />
{errors.name && <span className="text-13 text-red-500">{errors.name.message}</span>} {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="slug" htmlFor="slug"
> >
{t("workspace_creation.form.url.label")} {t("workspace_creation.form.url.label")}
@ -216,7 +216,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
"flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong focus:border-transparent transition-all duration-200", "flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong focus:border-transparent transition-all duration-200",
{ {
"border-strong": !errors.name, "border-strong": !errors.name,
"border-red-500": errors.name, "border-danger-strong": errors.name,
} }
)} )}
> >
@ -244,16 +244,18 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
/> />
<p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p> <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
{slugError && ( {slugError && (
<p className="-mt-3 text-13 text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p> <p className="-mt-3 text-13 text-danger-primary">
{t("workspace_creation.errors.validation.url_already_taken")}
</p>
)} )}
{invalidSlug && ( {invalidSlug && (
<p className="text-13 text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p> <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
)} )}
{errors.slug && <span className="text-13 text-red-500">{errors.slug.message}</span>} {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label <label
className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500" className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
htmlFor="organization_size" htmlFor="organization_size"
> >
{t("workspace_creation.form.organization_size.label")} {t("workspace_creation.form.organization_size.label")}
@ -291,7 +293,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
)} )}
/> />
{errors.organization_size && ( {errors.organization_size && (
<span className="text-13 text-red-500">{errors.organization_size.message}</span> <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
)} )}
</div> </div>
</div> </div>

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

@ -60,7 +60,7 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
as="button" as="button"
type="button" type="button"
className={({ active }) => className={({ active }) =>
cn("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded-sm w-full", { cn("text-danger-primary px-1 py-1.5 whitespace-nowrap text-left rounded-sm w-full", {
"bg-layer-1": active, "bg-layer-1": active,
}) })
} }

2
apps/web/core/components/pages/editor/title.tsx
View file

@ -70,7 +70,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
> >
<span <span
className={cn({ className={cn({
"text-red-500": title && title.length > 255, "text-danger-primary": title && title.length > 255,
})} })}
> >
{title?.length} {title?.length}

2
apps/web/core/components/pages/header/copy-link-control.tsx
View file

@ -57,7 +57,7 @@ export const PageCopyLinkControl = observer(function PageCopyLinkControl({ page
icon={isCopied ? Check : Link} icon={isCopied ? Check : Link}
onClick={handleCopy} onClick={handleCopy}
aria-label={isCopied ? "Copied link" : "Copy link"} aria-label={isCopied ? "Copied link" : "Copy link"}
className={cn(isCopied && "text-green-500")} className={cn(isCopied && "text-success-primary")}
/> />
</Tooltip> </Tooltip>
); );

4
apps/web/core/components/pages/header/favorite-control.tsx
View file

@ -37,7 +37,9 @@ export const PageFavoriteControl = observer(function PageFavoriteControl({ page
pageOperations.toggleFavorite(); pageOperations.toggleFavorite();
}} }}
aria-label={is_favorite ? "Remove favorite" : "Add to favorites"} aria-label={is_favorite ? "Remove favorite" : "Add to favorites"}
className={is_favorite ? "*:fill-(--color-label-yellow-icon) *:stroke-(--color-label-yellow-icon)" : ""} className={
is_favorite ? "[&_svg]:fill-(--color-label-yellow-icon) [&_svg]:stroke-(--color-label-yellow-icon)" : ""
}
/> />
); );
}); });

4
apps/web/core/components/pages/modals/page-form.tsx
View file

@ -119,7 +119,9 @@ export function PageForm(props: Props) {
autoFocus autoFocus
/> />
{isTitleLengthMoreThan255Character && ( {isTitleLengthMoreThan255Character && (
<span className="text-11 text-red-500">Max length of the name should be less than 255 characters</span> <span className="text-11 text-danger-primary">
Max length of the name should be less than 255 characters
</span>
)} )}
</div> </div>
</div> </div>

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