feat(editor2): better appearance for card shadows

Author: guansss

src/components/editor2/action/ActionItem.tsx

@@ -103,7 +103,7 @@ export const ActionItem: FC<ActionItemProps> = memo(
         <Card
           className={clsx(
             className,
-            '!p-0 !rounded overflow-hidden',
+            'card-shadow-subtle !p-0 !rounded overflow-hidden',
             typeInfo.accentText,
           )}
         >

src/components/editor2/operator/GroupItem.tsx

@@ -96,9 +96,8 @@ export const GroupItem: FC<GroupItemProps> = memo(({ baseGroupAtom }) => {
 
   return (
     <Card
-      elevation={Elevation.ONE}
       className={clsx(
-        '!p-0 flex flex-col overflow-hidden',
+        'card-shadow-subtle !p-0 flex flex-col overflow-hidden',
         active ? 'ring ring-purple-500 !border-0 !shadow-none' : '',
       )}
     >

src/components/editor2/operator/OperatorItem.tsx

@@ -110,8 +110,7 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
           >
             <Card
               interactive
-              elevation={Elevation.ONE}
-              className="relative w-24 p-0 !py-0 flex flex-col overflow-hidden select-none pointer-events-auto"
+              className="card-shadow-subtle relative w-24 p-0 !py-0 flex flex-col overflow-hidden select-none pointer-events-auto"
               {...attributes}
               {...listeners}
             >

src/styles/global.css

@@ -58,6 +58,22 @@ body,
   }
 }
 
+.card-shadow-subtle {
+  box-shadow:
+    0 0 3px 1px #0001,
+    0 2px 3px #0001;
+
+  &.bp4-interactive:hover {
+    box-shadow:
+      0 2px 4px #0002,
+      0 8px 24px #0003;
+  }
+
+  .dark & {
+    box-shadow: 0 0px 3px #fff9;
+  }
+}
+
 .bg-rainbow {
   background: linear-gradient(
     90deg,