From a94bef673865de4a1f25b891a47475c0f661a0d4 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Sat, 29 Mar 2025 11:56:43 +0000
Subject: [PATCH] fix(core): incorrect animated icon color & sizes (#11276)

---
 .../component/src/ui/audio-player/audio-player.css.ts     | 2 +-
 packages/frontend/component/src/ui/lottie/styles.css.ts   | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/component/src/ui/audio-player/audio-player.css.ts b/packages/frontend/component/src/ui/audio-player/audio-player.css.ts
index a8912ab34..d3b7b9fdc 100644
--- a/packages/frontend/component/src/ui/audio-player/audio-player.css.ts
+++ b/packages/frontend/component/src/ui/audio-player/audio-player.css.ts
@@ -83,7 +83,7 @@ export const controlButton = style({
   justifyContent: 'center',
   borderRadius: '50%',
   backgroundColor: cssVarV2('layer/background/secondary'),
-  color: cssVarV2('text/primary'),
+  color: cssVarV2('icon/primary'),
 });
 
 export const controls = style({
diff --git a/packages/frontend/component/src/ui/lottie/styles.css.ts b/packages/frontend/component/src/ui/lottie/styles.css.ts
index cf8e30183..73b5b2b88 100644
--- a/packages/frontend/component/src/ui/lottie/styles.css.ts
+++ b/packages/frontend/component/src/ui/lottie/styles.css.ts
@@ -2,6 +2,10 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { globalStyle, style } from '@vanilla-extract/css';
 export const root = style({
   display: 'inline-flex',
+  height: '1em',
+  width: '1em',
+  alignItems: 'center',
+  justifyContent: 'center',
 });
 
 // replace primary colors to cssVarV2('icon/primary')
@@ -28,14 +32,14 @@ const backgroundSecondaryColors = [
 globalStyle(
   `${root} :is(${iconPrimaryColors.map(color => `path[fill="${color}"]`).join(',')})`,
   {
-    fill: cssVarV2('icon/primary'),
+    fill: 'currentColor',
   }
 );
 
 globalStyle(
   `${root} :is(${iconPrimaryColors.map(color => `path[stroke="${color}"]`).join(',')})`,
   {
-    stroke: cssVarV2('icon/primary'),
+    stroke: 'currentColor',
   }
 );