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:
parent
1338e9d2a4
commit
1f06b67c66
111 changed files with 180 additions and 245 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue