fix: some style updates (#2396)

packages/component/src/components/app-sidebar/spolight/index.css.ts

@@ -0,0 +1,24 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const spotlightX = createVar();
+export const spotlightY = createVar();
+export const spotlightOpacity = createVar();
+export const spotlightSize = createVar();
+
+export const spotlight = style({
+  vars: {
+    [spotlightX]: '0px',
+    [spotlightY]: '0px',
+    [spotlightOpacity]: '0',
+    [spotlightSize]: '64px',
+  },
+  position: 'absolute',
+  background: `radial-gradient(${spotlightSize} circle at ${spotlightX} ${spotlightY}, var(--affine-text-primary-color), transparent)`,
+  inset: '0px',
+  pointerEvents: 'none',
+  willChange: 'background',
+  opacity: spotlightOpacity,
+  zIndex: 1,
+  transition: 'all 0.2s',
+  borderRadius: 'inherit',
+});

packages/component/src/components/app-sidebar/spolight/index.tsx

@@ -0,0 +1,49 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useTheme } from 'next-themes';
+import React, { useEffect, useRef } from 'react';
+
+import * as styles from './index.css';
+
+function useMouseOffset() {
+  const [offset, setOffset] = React.useState<{ x: number; y: number }>();
+  const [outside, setOutside] = React.useState(true);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current && ref.current.parentElement) {
+      const el = ref.current.parentElement;
+      const bound = el.getBoundingClientRect();
+
+      // debounce?
+      const onMouseMove = (e: MouseEvent) => {
+        setOffset({ x: e.clientX - bound.x, y: e.clientY - bound.y });
+        setOutside(false);
+      };
+
+      const onMouseLeave = () => {
+        setOutside(true);
+      };
+      el.addEventListener('mousemove', onMouseMove);
+      el.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        el.removeEventListener('mousemove', onMouseMove);
+        el.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, []);
+
+  return [offset, outside, ref] as const;
+}
+
+export function Spotlight() {
+  const [offset, outside, ref] = useMouseOffset();
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const offsetVars = assignInlineVars({
+    [styles.spotlightX]: (offset?.x ?? 0) + 'px',
+    [styles.spotlightY]: (offset?.y ?? 0) + 'px',
+    [styles.spotlightOpacity]: outside ? '0' : isDark ? '.1' : '0.07',
+  });
+
+  return <div style={offsetVars} ref={ref} className={styles.spotlight} />;
+}