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

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',
 });