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

* chore: replace old css vars

* fix: replace shadow and primary colors

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

View file

@ -83,7 +83,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
}}
tabIndex={-1}
>
<XCircle className="h-10 w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-11" />
<XCircle className="h-10 w-11 px-3 stroke-placeholder hover:cursor-pointer text-11" />
</button>
)}
</div>

View file

@ -132,7 +132,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
/>
{passwordFormData.email.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={handleEmailClear}
/>
)}
@ -158,12 +158,12 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
/>
{showPassword?.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
@ -189,12 +189,12 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
/>
{showPassword?.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}

View file

@ -96,7 +96,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
/>
{uniqueCodeFormData.email.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
onClick={handleEmailClear}
/>
)}

View file

@ -15,7 +15,7 @@ export function PoweredBy(props: TPoweredBy) {
return (
<a
href={WEBSITE_URL}
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-custom-shadow-2xs"
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-raised-100"
target="_blank"
rel="noreferrer noopener"
>

View file

@ -46,7 +46,7 @@ export function FiltersDropdown(props: Props) {
>
<Popover.Panel>
<div
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg"
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

View file

@ -87,7 +87,7 @@ export const UserAvatar = observer(function UserAvatar() {
>
<Popover.Panel>
<div
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg p-1"
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200 p-1"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

View file

@ -52,7 +52,7 @@
/* Progress Bar Styles */
:root {
--bprogress-color: rgb(var(--color-primary-100)) !important;
--bprogress-color: var(--background-color-accent-primary);
--bprogress-height: 2.5px !important;
}
@ -63,8 +63,8 @@
.bprogress .bar {
background: linear-gradient(
90deg,
rgba(var(--color-primary-100), 0.8) 0%,
rgba(var(--color-primary-100), 1) 100%
--alpha(var(--background-color-accent-primary) / 80%) 0%,
--alpha(var(--background-color-accent-primary) / 100%) 100%
) !important;
will-change: width, opacity;
}
@ -72,7 +72,7 @@
.bprogress .peg {
display: block;
box-shadow:
0 0 8px rgba(var(--color-primary-100), 0.6),
0 0 4px rgba(var(--color-primary-100), 0.4) !important;
0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
will-change: transform, opacity;
}