fix: alpha colors (#8418)
This commit is contained in:
parent
5a2e2e7e11
commit
7a3cebdb6b
6 changed files with 7 additions and 5 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue