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.
<div className="text-13 font-regular text-tertiary">
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>
</>
),

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 className="flex flex-col gap-1">
@ -153,11 +153,11 @@ export function WorkspaceCreateForm() {
)}
/>
</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 && (
<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 className="flex flex-col gap-1">
<h4 className="text-13 text-tertiary">How many people will use this workspace?</h4>
@ -187,7 +187,7 @@ export function WorkspaceCreateForm() {
)}
/>
{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>

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">
<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>
<Input
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">
<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>
<div className="relative">
<Input

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

@ -10,20 +10,22 @@ export function Banner(props: TBanner) {
return (
<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-shrink-0">
{type === "error" ? (
<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>
) : (
<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 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>

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="w-full space-y-1">
<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>
<Input
className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@ -174,7 +174,7 @@ export function InstanceSetupForm() {
</div>
<div className="w-full space-y-1">
<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>
<Input
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">
<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>
<Input
className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@ -207,13 +207,13 @@ export function InstanceSetupForm() {
autoComplete="on"
/>
{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 className="w-full space-y-1">
<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>
<Input
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">
<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>
<div className="relative">
<Input
@ -267,14 +267,14 @@ export function InstanceSetupForm() {
)}
</div>
{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} />
</div>
<div className="w-full space-y-1">
<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>
<div className="relative">
<Input
@ -311,7 +311,9 @@ export function InstanceSetupForm() {
</div>
{!!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 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
className={cn(
`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={() => {
setIsFocused(true);
@ -68,7 +68,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email}
onChange={(e) => setEmail(e.target.value)}
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"
autoFocus
ref={inputRef}
@ -88,7 +88,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
)}
</div>
{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} />
{emailError.email}
</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>
{!!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>
)}

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

@ -116,7 +116,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
autoFocus
/>
<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} />
Paste the code sent to your email
</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}>
<div
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,
})}
>

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

@ -100,7 +100,7 @@ export const UserAvatar = observer(function UserAvatar() {
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"
>
<LogOut size={12} className="shrink-0 text-red-500" />
<LogOut size={12} className="shrink-0 text-danger-primary" />
<div>Sign out</div>
</button>
</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
type="submit"
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
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)}
>
<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>
</div>
</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 ? (
<div
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" />

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"
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
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",
votingDimensions,
{
"border-red-600 text-red-600": isDownVotedByUser,
"border-danger-strong text-danger-primary": isDownVotedByUser,
"border-strong": !isDownVotedByUser,
"cursor-default": isInIframe,
}

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

@ -159,7 +159,9 @@ function SecurityPage() {
/>
)}
</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 className="space-y-1">
@ -199,7 +201,9 @@ function SecurityPage() {
</div>
{passwordSupport}
{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 className="space-y-1">
@ -238,7 +242,7 @@ function SecurityPage() {
)}
</div>
{!!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>

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

@ -157,7 +157,9 @@ function SecurityPage() {
/>
)}
</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 className="space-y-1">
@ -197,7 +199,9 @@ function SecurityPage() {
</div>
{passwordSupport}
{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 className="space-y-1">
@ -236,7 +240,7 @@ function SecurityPage() {
)}
</div>
{!!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>

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

@ -249,7 +249,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
<button
type="button"
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}
>
<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">
<div className="space-y-4">
<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}
</h2>
<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">
<div className="space-y-4">
<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>

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">
<InboxIcon className="size-5" />
{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>
),

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

@ -23,7 +23,7 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
blocked_by: {
key: "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" />,
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
className={cn(
`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={() => {
setIsFocused(true);
@ -88,7 +88,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
)}
</div>
{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} />
{t(emailError.email)}
</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 && (
<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" />
{t("auth.forgot_password.email_sent")}
</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 (
<>
{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">
<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 className="w-full text-13 font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
<div
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-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)}
>
<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>
)}
@ -282,7 +284,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
{!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password &&
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>
)}

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.password !== resetFormData.confirm_password &&
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>
<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.password !== passwordFormData.confirm_password &&
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>
<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
/>
<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} />
{t("auth.common.unique_code.paste_code")}
</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="">
<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 ">
<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" />
<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-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>
<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 }) {
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 (
<div className={cn("flex items-center gap-2 rounded-sm p-1 text-11", percentageColor)}>
<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",
name: "Count",
fill: "var(--color-brand-default)",
stroke: "var(--color-brand-default)",
fill: "var(--text-color-accent-primary)",
stroke: "var(--text-color-accent-primary)",
fillOpacity: 0.6,
dot: {
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>> = {
simple: {
ontrack: "text-green-500",
ontrack: "text-success-primary",
offtrack: "text-yellow-500",
atrisk: "text-red-500",
atrisk: "text-danger-primary",
},
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",
atrisk: "text-red-500 border border-red-500",
atrisk: "text-danger-primary border border-danger-strong",
},
tinted: {
ontrack: "text-green-500 bg-green-500/10",
ontrack: "text-success-primary bg-success-primary",
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;

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>
<Controller
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"
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>
</Tooltip>
<div className="flex w-4/5 items-center">
<h5 className="truncate text-13 font-medium">{token.label}</h5>
<span
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`}
>
{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-start gap-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 className="">
<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 && (
<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 && (
<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(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isDisabled
? "cursor-not-allowed border-green-500/50 bg-green-500/10"
: "border-green-500 bg-green-500/20 hover:bg-green-500"
? "cursor-not-allowed border-success-strong/50 bg-success-primary"
: "border-success-strong bg-success-primary hover:bg-green-500"
)}
>
<Check
className={cn(
"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>
@ -132,8 +132,8 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isSubmitting
? "cursor-not-allowed border-red-500/50 bg-red-500/10"
: "border-red-500 bg-red-500/20 hover:bg-red-500"
? "cursor-not-allowed border-danger-strong/50 bg-danger-primary"
: "border-danger-strong bg-danger-primary hover:bg-red-500"
)}
onClick={() => {
setIsEditing(false);
@ -143,7 +143,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
<CloseIcon
className={cn(
"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>

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>
{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"
? "The image size cannot exceed 5 MB."
: "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}
hasError={Boolean(errors.email)}
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}
/>
)}
/>
{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>
{secondStep && (
@ -177,15 +180,15 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
onChange={onChange}
ref={ref}
placeholder={changeEmailT("form.code.placeholder")}
className={cn({ "border-red-500": errors.code })}
className={cn({ "border-danger-strong": errors.code })}
autoFocus
/>
)}
/>
{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>
)}

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

@ -244,7 +244,7 @@ export function GptAssistantPopover(props: Props) {
</div>
)}
{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
again.
</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>
{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"
? "The image size cannot exceed 5 MB."
: "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>
{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"
? "The image size cannot exceed 5 MB."
: "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>
<Controller

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

@ -93,7 +93,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
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>
</Tooltip>
)}

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

@ -187,7 +187,7 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
/>
)}
{/* {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
values for.
</div>

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

@ -171,7 +171,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
<div
className={cn(
"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
@ -181,7 +181,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
/>
{estimatePointError?.message && (
<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} />
</div>
</Tooltip>
@ -191,7 +191,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
{estimateInputValue && estimateInputValue.length > 0 && (
<button
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}
>
{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
className={cn(
"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
@ -188,7 +188,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
}
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} />
</div>
</Tooltip>
@ -199,7 +199,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
{estimateInputValue && estimateInputValue.length > 0 && (
<button
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}
>
{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
className={`rounded-sm text-11 px-2 py-1 capitalize ${
rowData.status === "completed"
? "bg-green-500/20 text-green-500"
? "bg-success-primary text-success-primary"
: rowData.status === "processing"
? "bg-yellow-500/20 text-yellow-500"
: rowData.status === "failed"
? "bg-red-500/20 text-red-500"
? "bg-danger-primary text-danger-primary"
: rowData.status === "expired"
? "bg-orange-500/20 text-orange-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
className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
service.status === "completed"
? "bg-green-500/20 text-green-500"
? "bg-success-primary text-success-primary"
: service.status === "processing"
? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed"
? "bg-red-500/20 text-red-500"
? "bg-danger-primary text-danger-primary"
: service.status === "expired"
? "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>
);

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}
onChange={onChange}
buttonClassName={cn(buttonClassName, {
"border-red-500": error,
"border-danger-strong": error,
})}
className={cn("rounded-md border-[0.5px] !border-subtle", className)}
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 (
<>
{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} />
</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>
<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
variant="secondary"
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={() =>
handleActionWithPermission(
isProjectAdmin,
@ -333,7 +333,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
<Button
variant="secondary"
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={() =>
handleActionWithPermission(
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} />
Accept
</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} />
Decline
</div>
@ -201,7 +201,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
)}
{canDelete && !isAcceptedOrDeclined && (
<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} />
Delete
</div>

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

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

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}>
<div className="flex flex-col gap-6 p-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">
<AlertTriangle className="h-6 w-6 text-red-500" aria-hidden="true" />
<span className="place-items-center rounded-full bg-danger-primary p-4">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</span>
<span className="flex items-center justify-start">
<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
className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
index <= activeIntegrationState()
? `border-accent-strong bg-accent-primary ${
? `border-accent-strong ${
index === activeIntegrationState()
? "border-opacity-100 bg-opacity-100"
: "border-opacity-80 bg-opacity-80"
? "border-opacity-100 bg-accent-primary"
: "border-opacity-80 bg-accent-primary/80"
}`
: "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 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 && (
<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>
@ -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 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 && (
<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>

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

@ -116,12 +116,12 @@ export function JiraImporterRoot() {
index > activeIntegrationState() + 1 ||
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()
? `border-accent-strong bg-accent-primary ${
? `border-accent-strong ${
index === activeIntegrationState()
? "border-opacity-100 bg-opacity-100"
: "border-opacity-80 bg-opacity-80"
? "border-opacity-100 bg-accent-primary"
: "border-opacity-80 bg-accent-primary/80"
}`
: "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
className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
service.status === "completed"
? "bg-green-500/20 text-green-500"
? "bg-success-primary text-success-primary"
: service.status === "processing"
? "bg-yellow-500/20 text-yellow-500"
: 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">
{integration.title}
{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}
</h3>
<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()}
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"
} ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
} ${isDragReject ? "bg-danger-subtle" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
>
<input {...getInputProps()} />
<span className="flex items-center gap-2">
{isDragActive ? (
<p>Drop here...</p>
) : fileError ? (
<p className="text-center text-red-500">{fileError}</p>
<p className="text-center text-danger-primary">{fileError}</p>
) : isLoading ? (
<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
mergeDates
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}
showTooltip
customTooltipHeading="Date Range"
@ -187,7 +187,7 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
placeholder={t("common.order_by.due_date")}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlight ? "text-red-500" : ""}
buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
clearIconClassName="text-primary"
optionsClassName="z-30"
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",
primary: "text-primary",
"primary-subtle": "text-primary/80",
success: "text-success",
success: "text-success-primary",
};
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}>
<LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
<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>
);
});

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>
<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);
}}
>
<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>
</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
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" />
<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);
}}
>
<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>
</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"
buttonClassName={cn("text-body-xs-regular", {
"text-placeholder": !issue.target_date,
"text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
"text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
})}
hideIcon
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}`,
{
"flex flex-col border-[1px] border-strong z-[2]": shouldOverlayBeVisible,
"bg-red-200/60": workflowDisabledSource && isDropDisabled,
"bg-danger-primary": workflowDisabledSource && isDropDisabled,
},
{ 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
className={`${
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" : ""
} 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>
<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>
</div>
</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}
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>
{isEpic && displayProperties && (
<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
mergeDates
buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""}
clearIconClassName="!text-primary"
buttonClassName={
shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
}
clearIconClassName="text-primary!"
disabled={isReadOnly}
renderByDefault={isMobile}
showTooltip
@ -344,10 +346,12 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
onChange={handleTargetDate}
minDate={minDate}
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"}
buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""}
clearIconClassName="!text-primary"
buttonClassName={
shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
}
clearIconClassName="text-primary!"
optionsClassName="z-10"
disabled={isReadOnly}
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 { t } = useTranslation();
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
ref={ref}
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
className={cn(
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 ? (

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(
"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]"

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>
);
});

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"
buttonClassName={cn("text-body-xs-medium", {
"text-placeholder": !issue.target_date,
"text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
"text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
})}
hideIcon
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 ? (
<div
className={cn("h-full flex items-center gap-1", {
"text-red-500": shouldHighlightDate,
"text-danger-primary": shouldHighlightDate,
})}
>
<CalendarDays className="shrink-0 size-3" />
@ -39,7 +39,7 @@ export function WorkItemPreviewCardDate(props: Props) {
) : (
<div
className={cn("h-full flex items-center gap-1", {
"text-red-500": shouldHighlightDate,
"text-danger-primary": shouldHighlightDate,
})}
>
<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(
"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
)}
@ -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
</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>
);
});

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" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={
shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-red-500" : ""
shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-danger-primary" : ""
}
clearIconClassName="!text-primary"
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")}
</Button>
</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>
<Controller

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

@ -31,14 +31,16 @@ export function ModuleStatusSelect({ control, error, tabIndex }: Props) {
<CustomSelect
value={value}
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 ? (
<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)) ?? (
<span className={`${error ? "text-red-500" : "text-secondary"}`}>Status</span>
<span className={`${error ? "text-danger-primary" : "text-secondary"}`}>Status</span>
)}
</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",
parseInt(projectCountInput) >= 1
? "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>
{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>

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)}>
<div className="space-y-1">
<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"
>
{t("workspace_creation.form.name.label")}
@ -189,11 +189,11 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
</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 className="space-y-1">
<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"
>
{t("workspace_creation.form.url.label")}
@ -211,7 +211,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
render={({ field: { value, ref, onChange } }) => (
<div
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>
@ -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>
{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 && (
<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>
<hr className="w-full border-strong" />
<div className="space-y-1">
<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"
>
{t("workspace_creation.form.organization_size.label")}
@ -278,7 +280,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
)}
/>
{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>

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) && (
<div className="mx-8 my-1">
<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>

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="space-y-1">
<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"
>
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 className="space-y-1">
<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"
>
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>
@ -490,7 +492,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
)}
/>
{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>
</>
@ -503,7 +505,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
<>
<div className="space-y-1">
<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"
>
What role are you working on? Choose one.
@ -534,11 +536,11 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
</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 className="space-y-1">
<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"
>
What is your domain expertise? Choose one or more.
@ -576,7 +578,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
</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>
</>
)}

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 */}
<div className="flex flex-col gap-2">
<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"
>
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",
{
"border-strong": !errors.first_name,
"border-red-500": errors.first_name,
"border-danger-strong": errors.first_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>
{/* 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"
className="transition-all duration-200"
/>
{hasPasswordMismatch && <p className="text-11 text-red-500 mt-1">Passwords do not match</p>}
{isPasswordValid && <p className="text-11 text-green-500 mt-1">✓ Passwords match</p>}
{hasPasswordMismatch && <p className="text-11 text-danger-primary mt-1">Passwords do not match</p>}
{isPasswordValid && <p className="text-11 text-success-primary mt-1">✓ Passwords match</p>}
</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>
)}
/>
{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>
{/* Action Buttons */}
<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) && (
<div className="mx-8 my-1">
<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>

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

@ -155,7 +155,7 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
</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>
{/* 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-2">
<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"
>
{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",
{
"border-strong": !errors.name,
"border-red-500": errors.name,
"border-danger-strong": errors.name,
}
)}
// eslint-disable-next-line jsx-a11y/no-autofocus
@ -191,11 +191,11 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
</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 className="flex flex-col gap-2">
<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"
>
{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",
{
"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>
{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 && (
<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 className="flex flex-col gap-2">
<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"
>
{t("workspace_creation.form.organization_size.label")}
@ -291,7 +293,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
)}
/>
{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>

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"
type="button"
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,
})
}

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

@ -70,7 +70,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
>
<span
className={cn({
"text-red-500": title && title.length > 255,
"text-danger-primary": title && title.length > 255,
})}
>
{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}
onClick={handleCopy}
aria-label={isCopied ? "Copied link" : "Copy link"}
className={cn(isCopied && "text-green-500")}
className={cn(isCopied && "text-success-primary")}
/>
</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();
}}
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
/>
{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>

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