From 80292c4667384713164ca9e81e4b23e4c3cb0a87 Mon Sep 17 00:00:00 2001
From: Scenery <1507337624@qq.com>
Date: Fri, 5 Jan 2024 15:58:26 +0800
Subject: [PATCH 1/2] feat: update statistic style

---
 packages/statistic/src/countdown.tsx |  5 ++--
 packages/statistic/src/interface.ts  |  2 ++
 packages/statistic/src/statistic.tsx |  7 +++---
 packages/statistic/src/style.ts      | 35 ++++++++++++++++++++++------
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/statistic/src/countdown.tsx b/packages/statistic/src/countdown.tsx
index 15b66ed3f..dffbad5e0 100644
--- a/packages/statistic/src/countdown.tsx
+++ b/packages/statistic/src/countdown.tsx
@@ -21,6 +21,7 @@ export const Countdown = forwardRef<HTMLDivElement, CountDownProps>(
       now = dayjs(),
       start = true,
       valueStyle,
+      colorScheme = "grayBlue",
       ...restProps
     } = props
 
@@ -71,8 +72,8 @@ export const Countdown = forwardRef<HTMLDivElement, CountDownProps>(
         css={[statisticStyle, applyBoxStyle(props)]}
         {...deleteCssProps(restProps)}
       >
-        {title && <div css={statisticTitleStyle}>{title}</div>}
-        <div css={statisticContentStyle} style={valueStyle}>
+        {title && <div css={statisticTitleStyle(colorScheme)}>{title}</div>}
+        <div css={statisticContentStyle(colorScheme)} style={valueStyle}>
           {getDateString(valueShow, format)}
         </div>
       </div>
diff --git a/packages/statistic/src/interface.ts b/packages/statistic/src/interface.ts
index 0773bb8a3..666c8d522 100644
--- a/packages/statistic/src/interface.ts
+++ b/packages/statistic/src/interface.ts
@@ -18,6 +18,7 @@ export interface StatisticProps
   extra?: ReactNode
   prefix?: string | ReactNode
   suffix?: string | ReactNode
+  colorScheme?: string
 }
 
 export interface CountDownProps
@@ -31,4 +32,5 @@ export interface CountDownProps
   onFinish?: () => void
   onChange?: (value: number) => void
   valueStyle?: CSSProperties
+  colorScheme?: string
 }
diff --git a/packages/statistic/src/statistic.tsx b/packages/statistic/src/statistic.tsx
index 9a218f557..33b0a6d76 100644
--- a/packages/statistic/src/statistic.tsx
+++ b/packages/statistic/src/statistic.tsx
@@ -40,6 +40,7 @@ export const Statistic = forwardRef<any, StatisticProps>((props, ref) => {
     countUp,
     countFrom = 0,
     countDuration = 2000,
+    colorScheme = "grayBlue",
     ...restProps
   } = props
 
@@ -108,14 +109,14 @@ export const Statistic = forwardRef<any, StatisticProps>((props, ref) => {
       css={[statisticStyle, applyBoxStyle(props)]}
       {...deleteCssProps(restProps)}
     >
-      {title && <div css={statisticTitleStyle}>{title}</div>}
+      {title && <div css={statisticTitleStyle(colorScheme)}>{title}</div>}
       <div>
         <Skeleton
           animation
           visible={!!loading}
           text={{ rows: 1, width: "100%" }}
         >
-          <div css={statisticContentStyle}>
+          <div css={statisticContentStyle(colorScheme)}>
             {prefix && (
               <span css={applyStatisticDecoratorStyle(true, !isObject(prefix))}>
                 {prefix}
@@ -131,7 +132,7 @@ export const Statistic = forwardRef<any, StatisticProps>((props, ref) => {
             )}
           </div>
         </Skeleton>
-        {extra && <div css={statisticExtraStyle}>{extra}</div>}
+        {extra && <div css={statisticExtraStyle(colorScheme)}>{extra}</div>}
       </div>
     </div>
   )
diff --git a/packages/statistic/src/style.ts b/packages/statistic/src/style.ts
index 4952b93d2..99319a79e 100644
--- a/packages/statistic/src/style.ts
+++ b/packages/statistic/src/style.ts
@@ -1,5 +1,24 @@
 import { css, SerializedStyles } from "@emotion/react"
-import { globalColor, illaPrefix } from "@illa-design/theme"
+import {
+  getColor,
+  getSpecialThemeColor,
+  globalColor,
+  illaPrefix,
+} from "@illa-design/theme"
+
+const getStatisticColor = (color: string) => {
+  if (color === "white") {
+    return getColor("white", "02")
+  } else if (
+    color === "blackAlpha" ||
+    color === "gray" ||
+    color === "grayBlue"
+  ) {
+    return getColor(color, "04")
+  } else {
+    return getColor(color, "05")
+  }
+}
 
 export const statisticStyle = css`
   display: inline-block;
@@ -8,21 +27,23 @@ export const statisticStyle = css`
   font-weight: 400;
 `
 
-export const statisticTitleStyle = css`
+export const statisticTitleStyle = (colorScheme: string) => css`
   margin-bottom: 4px;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
+  color: ${getStatisticColor(colorScheme)};
 `
 
-export const statisticExtraStyle = css`
+export const statisticExtraStyle = (colorScheme: string) => css`
   font-size: 12px;
   margin-top: 4px;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
+  color: ${getStatisticColor(colorScheme)};
 `
 
-export const statisticContentStyle = css`
+export const statisticContentStyle = (colorScheme: string) => css`
   font-size: 24px;
   font-weight: 500;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  display: flex;
+  align-items: center;
+  color: ${getSpecialThemeColor(colorScheme)};
 `
 
 export function applyStatisticDecoratorStyle(

From 45b8a62371a9cd67fdc39072f39a8a0255fa8ef5 Mon Sep 17 00:00:00 2001
From: Scenery <1507337624@qq.com>
Date: Fri, 5 Jan 2024 16:21:15 +0800
Subject: [PATCH 2/2] fix: statistic style

---
 packages/statistic/src/style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/statistic/src/style.ts b/packages/statistic/src/style.ts
index 99319a79e..3cd032519 100644
--- a/packages/statistic/src/style.ts
+++ b/packages/statistic/src/style.ts
@@ -42,7 +42,7 @@ export const statisticContentStyle = (colorScheme: string) => css`
   font-size: 24px;
   font-weight: 500;
   display: flex;
-  align-items: center;
+  align-items: baseline;
   color: ${getSpecialThemeColor(colorScheme)};
 `