feat: update statistic style

illacloud · Jan 5, 2024 · 80292c4 · 80292c4
1 parent 231a66e
commit 80292c4
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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(