fix: alpha colors (#8418)

This commit is contained in:
Aaryan Khandelwal 2025-12-22 16:52:09 +05:30 committed by GitHub
parent 5a2e2e7e11
commit 7a3cebdb6b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 7 additions and 5 deletions

View file

@ -42,7 +42,7 @@ export function ImageAlignmentAction(props: Props) {
</button>
</Tooltip>
{isDropdownOpen && (
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded-sm">
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-alpha-black-1000 flex items-center gap-2 px-2 rounded-sm">
{IMAGE_ALIGNMENT_OPTIONS.map((option) => (
<Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
<button

View file

@ -234,7 +234,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}}
onMouseDown={handleMouseDown}
/>
<div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-black">
<div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-alpha-black-1200">
<div className="flex items-center">
<button
type="button"

View file

@ -53,7 +53,7 @@ export function ImageUploadStatus(props: Props) {
if (uploadStatus === undefined) return null;
return (
<div className="absolute top-1 right-1 z-20 bg-black/60 rounded-sm text-11 font-medium w-10 text-center">
<div className="absolute top-1 right-1 z-20 bg-alpha-black-800 rounded-sm text-11 font-medium w-10 text-center">
{displayStatus}%
</div>
);

View file

@ -116,7 +116,7 @@ function CloseButton({ onClick }: { onClick?: () => void }) {
return (
<button
onClick={onClick}
className="rounded-sm p-1 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
className="rounded-sm p-1 hover:bg-alpha-black-100 dark:hover:bg-alpha-white-100 transition-colors"
aria-label="Dismiss"
>
<svg

View file

@ -95,7 +95,7 @@ export function ModalPortal({
>
{showOverlay && (
<div
className={cn("absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300", overlayClassName)}
className={cn("absolute inset-0 bg-alpha-black-700 transition-opacity duration-300", overlayClassName)}
onClick={handleOverlayClick}
aria-hidden="true"
/>

View file

@ -7,6 +7,7 @@
/* ---------- Alpha colors ---------- */
/* White alpha */
--color-white: oklch(1 0 0);
--color-alpha-white-0: oklch(1 0 0 / 0%);
--color-alpha-white-100: oklch(1 0 0 / 5%);
--color-alpha-white-200: oklch(1 0 0 / 10%);
@ -22,6 +23,7 @@
--color-alpha-white-1200: oklch(1 0 0 / 95%);
/* Black alpha */
--color-black: oklch(0.1482 0.0034 196.79);
--color-alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
--color-alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%);
--color-alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);