fix(component): ensure the colorfulCallback of Avatar in different sizes behaves consistently (#6784)

packages/frontend/component/src/ui/avatar/avatar.stories.tsx

@@ -31,6 +31,13 @@ ColorfulFallback.args = {
   colorfulFallback: true,
   name: 'blocksuite',
 };
+export const ColorfulFallbackWithDifferentSize: StoryFn<AvatarProps> = args => (
+  <>
+    <Avatar {...args} size={20} colorfulFallback name="AFFiNE" />
+    <Avatar {...args} size={40} colorfulFallback name="AFFiNE" />
+    <Avatar {...args} size={60} colorfulFallback name="AFFiNE" />
+  </>
+);
 export const WithHover: StoryFn<AvatarProps> = Template.bind(undefined);
 WithHover.args = {
   size: 50,

packages/frontend/component/src/ui/avatar/avatar.tsx

@@ -24,7 +24,7 @@ import type { TooltipProps } from '../tooltip';
 import { Tooltip } from '../tooltip';
 import { ColorfulFallback } from './colorful-fallback';
 import * as style from './style.css';
-import { sizeVar } from './style.css';
+import { blurVar, sizeVar } from './style.css';
 
 export type AvatarProps = {
   size?: number;
@@ -92,6 +92,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
             style={{
               ...assignInlineVars({
                 [sizeVar]: size ? `${size}px` : '20px',
+                [blurVar]: `${size * 0.3}px`,
               }),
               ...propsStyles,
             }}

packages/frontend/component/src/ui/avatar/style.css.ts

@@ -1,6 +1,7 @@
 import { cssVar } from '@toeverything/theme';
 import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';
 export const sizeVar = createVar('sizeVar');
+export const blurVar = createVar('blurVar');
 const bottomAnimation = keyframes({
   '0%': {
     top: '-44%',
@@ -89,7 +90,7 @@ export const DefaultAvatarMiddleItemStyle = style({
   top: '-30%',
   transform: 'matrix(-0.48, -0.88, 0.8, -0.6, 0, 0)',
   opacity: '0.8',
-  filter: 'blur(12px)',
+  filter: `blur(${blurVar})`,
   transformOrigin: 'center center',
   animation: `${middleAnimation} 3s ease-in-out forwards infinite`,
   animationPlayState: 'paused',
@@ -105,7 +106,7 @@ export const DefaultAvatarBottomItemStyle = style({
   left: '-11%',
   transform: 'matrix(-0.29, -0.96, 0.94, -0.35, 0, 0)',
   opacity: '0.8',
-  filter: 'blur(12px)',
+  filter: `blur(${blurVar})`,
   transformOrigin: 'center center',
   willChange: 'left, top, transform',
   animation: `${bottomAnimation} 3s ease-in-out forwards infinite`,
@@ -121,7 +122,7 @@ export const DefaultAvatarTopItemStyle = style({
   right: '-30%',
   top: '-30%',
   opacity: '0.8',
-  filter: 'blur(12px)',
+  filter: `blur(${blurVar})`,
   transform: 'matrix(-0.28, -0.96, 0.93, -0.37, 0, 0)',
   transformOrigin: 'center center',
 });