fix: alpha colors (#8418)

Author: aaryan610

packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx

@@ -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

packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx

@@ -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"

packages/editor/src/core/extensions/custom-image/components/upload-status.tsx

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

packages/propel/src/banner/banner.stories.tsx

@@ -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

packages/propel/src/portal/modal-portal.tsx

@@ -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"
         />

packages/tailwind-config/variables.css

@@ -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%);