From 5817b050ef93b6802d73c0ac17fc28754d059b91 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Fri, 25 Nov 2022 10:11:52 +0800
Subject: [PATCH 1/2] style(CountDown): using css token

---
 src/count-down/README.md                      |   7 +-
 .../__test__/__snapshots__/demo.test.js.snap  | 321 ++++++++++++++----
 .../__test__/__snapshots__/index.test.js.snap |   8 +-
 src/count-down/__test__/demo.test.js          |   2 +-
 src/count-down/_example/base/index.wxml       |  48 ++-
 src/count-down/_example/base/index.wxss       |  28 +-
 src/count-down/_example/count-down.json       |   2 +-
 src/count-down/_example/count-down.wxml       |   8 +-
 .../_example/{sizeCountDown => size}/index.js |   0
 .../{sizeCountDown => size}/index.json        |   0
 src/count-down/_example/size/index.wxml       |  77 +++++
 src/count-down/_example/size/index.wxss       |  12 +
 .../_example/sizeCountDown/index.wxml         |  27 --
 .../_example/sizeCountDown/index.wxss         |  30 --
 src/count-down/count-down.less                | 244 +++++++------
 src/count-down/count-down.ts                  |  10 +-
 src/count-down/count-down.wxml                |  28 +-
 src/count-down/props.ts                       |   2 +-
 src/count-down/type.ts                        |   2 +-
 src/count-down/utils.ts                       |  27 +-
 20 files changed, 561 insertions(+), 322 deletions(-)
 rename src/count-down/_example/{sizeCountDown => size}/index.js (100%)
 rename src/count-down/_example/{sizeCountDown => size}/index.json (100%)
 create mode 100644 src/count-down/_example/size/index.wxml
 create mode 100644 src/count-down/_example/size/index.wxss
 delete mode 100644 src/count-down/_example/sizeCountDown/index.wxml
 delete mode 100644 src/count-down/_example/sizeCountDown/index.wxss

diff --git a/src/count-down/README.md b/src/count-down/README.md
index 2af99c44e..66faf6e73 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -24,7 +24,7 @@ isComponent: true
 
 ### 调整尺寸
 
-{{ sizeCountDown }}
+{{ size }}
 
 ## API
 ### CountDown Props
@@ -36,10 +36,11 @@ content | String / Slot | 'default' | 最终倒计时的展示内容，值为'de
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N
 millisecond | Boolean | false | 是否开启毫秒级渲染 | N
-size | String `v0.5.1` | 'small' | 倒计时尺寸。可选项：small/medium/large | N
+size | String `v0.5.1` | 'medium' | 倒计时尺寸。可选项：small/medium/large | N
 split-with-unit `v0.5.1` | Boolean | false | 使用时间单位分割 | N
-theme | String `v0.5.1` | 'default' | 倒计时风格。可选项：default/round/square | N
+theme | String `v0.5.1` | 'default' | 倒计时风格。可选项：default/round/square/light | N
 time | Number | - | 必需。倒计时时长，单位毫秒 | Y
+external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、计时器类型、分隔线类名 等。`['t-class', 't-class-count', 't-class-split']` | N
 
 ### CountDown Events
 
diff --git a/src/count-down/__test__/__snapshots__/demo.test.js.snap b/src/count-down/__test__/__snapshots__/demo.test.js.snap
index d61b4f2be..6436cf96d 100644
--- a/src/count-down/__test__/__snapshots__/demo.test.js.snap
+++ b/src/count-down/__test__/__snapshots__/demo.test.js.snap
@@ -3,174 +3,345 @@
 exports[`CountDown CountDown base demo works fine 1`] = `
 <base>
   <wx-view
-    class="flex base-time"
+    class="demo-count-down"
   >
-    <t-count-down
-      tClass="base-time-cls"
-      time="{{5760000}}"
-    />
-    <wx-view
-      class="base-time-text"
+    <wx-text
+      class="demo-count-down-desc"
     >
        时分秒 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
   <wx-view
-    class="flex base-time"
+    class="demo-count-down"
   >
-    <t-count-down
-      format="HH:mm:ss:SSS"
-      millisecond="{{true}}"
-      tClass="base-time-cls"
-      time="{{5760000}}"
-    />
-    <wx-view
-      class="base-time-text"
+    <wx-text
+      class="demo-count-down-desc"
     >
        带毫秒 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss:SSS"
+        millisecond="{{true}}"
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
   <wx-view
-    class="flex base-time"
+    class="demo-count-down"
   >
-    <t-count-down
-      content="default"
-      theme="square"
-      time="{{5760000}}"
-    />
-    <wx-view
-      class="base-time-text"
+    <wx-text
+      class="demo-count-down-desc"
     >
        带方形底 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        content="default"
+        theme="square"
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
   <wx-view
-    class="flex base-time"
+    class="demo-count-down"
   >
-    <t-count-down
-      content="default"
-      theme="round"
-      time="{{5760000}}"
-    />
-    <wx-view
-      class="base-time-text"
+    <wx-text
+      class="demo-count-down-desc"
     >
        带圆形底 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        content="default"
+        theme="round"
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
   <wx-view
-    class="flex base-time"
+    class="demo-count-down"
   >
-    <t-count-down
-      content="default"
-      splitWithUnit="{{true}}"
-      theme="round"
-      time="{{5760000}}"
-    />
-    <wx-view
-      class="base-time-text"
+    <wx-text
+      class="demo-count-down-desc"
     >
        带单位 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        content="default"
+        splitWithUnit="{{true}}"
+        theme="round"
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
   <wx-view
-    class="flex base-time"
+    class="demo-count-down"
   >
-    <t-count-down
-      content="default"
-      splitWithUnit="{{true}}"
-      theme="highlight"
-      time="{{5760000}}"
-    />
-    <wx-view
-      class="base-time-text"
+    <wx-text
+      class="demo-count-down-desc"
     >
        无底色带单位 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        content="default"
+        splitWithUnit="{{true}}"
+        theme="light"
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
 </base>
 `;
 
-exports[`CountDown CountDown sizeCountDown demo works fine 1`] = `
-<sizeCountDown>
+exports[`CountDown CountDown size demo works fine 1`] = `
+<size>
   <wx-view
-    class="flex spec-item"
+    class="demo-count-down"
   >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       时分秒 
+    </wx-text>
     <wx-view
-      class="spec-item-left"
+      class="demo-count-down-content"
     >
       <t-count-down
-        content="default"
-        theme="square"
+        size="small"
         time="{{5760000}}"
       />
     </wx-view>
     <wx-view
-      class="spec-item-right"
+      class="demo-count-down-content"
     >
       <t-count-down
         time="{{5760000}}"
       />
     </wx-view>
     <wx-view
-      class="spec-item-after"
+      class="demo-count-down-content"
     >
-       S 
+      <t-count-down
+        size="large"
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
   <wx-view
-    class="flex spec-item"
+    class="demo-count-down"
   >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带毫秒 
+    </wx-text>
     <wx-view
-      class="spec-item-left"
+      class="demo-count-down-content"
     >
       <t-count-down
-        content="default"
-        size="middle"
-        theme="square"
+        format="HH:mm:ss:SSS"
+        millisecond="{{true}}"
+        size="small"
         time="{{5760000}}"
       />
     </wx-view>
     <wx-view
-      class="spec-item-right"
+      class="demo-count-down-content"
     >
       <t-count-down
-        size="middle"
+        format="HH:mm:ss:SSS"
+        millisecond="{{true}}"
         time="{{5760000}}"
       />
     </wx-view>
     <wx-view
-      class="spec-item-after"
+      class="demo-count-down-content"
     >
-       M 
+      <t-count-down
+        format="HH:mm:ss:SSS"
+        millisecond="{{true}}"
+        size="large"
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
   <wx-view
-    class="flex spec-item last-padding"
+    class="demo-count-down"
   >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带方形底 
+    </wx-text>
     <wx-view
-      class="spec-item-left"
+      class="demo-count-down-content"
     >
       <t-count-down
-        content="default"
+        format="HH:mm:ss"
+        size="small"
+        theme="square"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        theme="square"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
         size="large"
         theme="square"
         time="{{5760000}}"
       />
     </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带圆形底 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="small"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="large"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带单位 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="small"
+        splitWithUnit="{{true}}"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
     <wx-view
-      class="spec-item-right"
+      class="demo-count-down-content"
     >
       <t-count-down
+        format="HH:mm:ss"
+        splitWithUnit="{{true}}"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
         size="large"
+        splitWithUnit="{{true}}"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       无底色带单位 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="small"
+        splitWithUnit="{{true}}"
+        theme="light"
         time="{{5760000}}"
       />
     </wx-view>
     <wx-view
-      class="spec-item-after"
+      class="demo-count-down-content"
     >
-       L 
+      <t-count-down
+        format="HH:mm:ss"
+        splitWithUnit="{{true}}"
+        theme="light"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="large"
+        splitWithUnit="{{true}}"
+        theme="light"
+        time="{{5760000}}"
+      />
     </wx-view>
   </wx-view>
-</sizeCountDown>
+</size>
 `;
diff --git a/src/count-down/__test__/__snapshots__/index.test.js.snap b/src/count-down/__test__/__snapshots__/index.test.js.snap
index ff8168df0..c293b8874 100644
--- a/src/count-down/__test__/__snapshots__/index.test.js.snap
+++ b/src/count-down/__test__/__snapshots__/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`countdown :autoStart 1`] = `
 <main>
   <t-count-down>
     <wx-view
-      class="t-class t-count-down t-count-down--small t-count-down--default"
+      class="t-count-down t-count-down--default t-count-down--medium t-class "
       style=""
     >
       00 : 00 : 01
@@ -17,7 +17,7 @@ exports[`countdown :base 1`] = `
 <main>
   <t-count-down>
     <wx-view
-      class="t-class t-count-down t-count-down--small t-count-down--default"
+      class="t-count-down t-count-down--default t-count-down--medium t-class "
       style=""
     >
       00 : 00 : 01
@@ -30,7 +30,7 @@ exports[`countdown :base 2`] = `
 <main>
   <t-count-down>
     <wx-view
-      class="t-class t-count-down t-count-down--small t-count-down--default"
+      class="t-count-down t-count-down--default t-count-down--medium t-class "
       style=""
     >
       00 : 00 : 00
@@ -45,7 +45,7 @@ exports[`countdown :millisecond 1`] = `
     id="cd"
   >
     <wx-view
-      class="t-class t-count-down t-count-down--small t-count-down--default"
+      class="t-count-down t-count-down--default t-count-down--medium t-class "
       style=""
     >
       00 : 00 : 00
diff --git a/src/count-down/__test__/demo.test.js b/src/count-down/__test__/demo.test.js
index 0b789387b..1a3ced6f1 100644
--- a/src/count-down/__test__/demo.test.js
+++ b/src/count-down/__test__/demo.test.js
@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['base', 'sizeCountDown'];
+const mapper = ['base', 'size'];
 
 describe('CountDown', () => {
   mapper.forEach((demoName) => {
diff --git a/src/count-down/_example/base/index.wxml b/src/count-down/_example/base/index.wxml
index 46d45e81d..c7a2e2b11 100644
--- a/src/count-down/_example/base/index.wxml
+++ b/src/count-down/_example/base/index.wxml
@@ -1,29 +1,41 @@
-<view class="flex base-time">
-  <t-count-down t-class="base-time-cls" time="{{ time }}" />
-  <view class="base-time-text"> 时分秒 </view>
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 时分秒 </text>
+  <view class="demo-count-down-content">
+    <t-count-down time="{{ time }}" />
+  </view>
 </view>
 
-<view class="flex base-time">
-  <t-count-down t-class="base-time-cls" format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
-  <view class="base-time-text"> 带毫秒 </view>
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 带毫秒 </text>
+  <view class="demo-count-down-content">
+    <t-count-down format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
+  </view>
 </view>
 
-<view class="flex base-time">
-  <t-count-down content="default" time="{{ time }}" theme="square"> </t-count-down>
-  <view class="base-time-text"> 带方形底 </view>
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 带方形底 </text>
+  <view class="demo-count-down-content">
+    <t-count-down content="default" time="{{ time }}" theme="square"> </t-count-down>
+  </view>
 </view>
 
-<view class="flex base-time">
-  <t-count-down content="default" time="{{ time }}" theme="round"> </t-count-down>
-  <view class="base-time-text"> 带圆形底 </view>
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 带圆形底 </text>
+  <view class="demo-count-down-content">
+    <t-count-down content="default" time="{{ time }}" theme="round"> </t-count-down>
+  </view>
 </view>
 
-<view class="flex base-time">
-  <t-count-down content="default" time="{{ time }}" splitWithUnit theme="round" />
-  <view class="base-time-text"> 带单位 </view>
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 带单位 </text>
+  <view class="demo-count-down-content">
+    <t-count-down content="default" time="{{ time }}" splitWithUnit theme="round" />
+  </view>
 </view>
 
-<view class="flex base-time">
-  <t-count-down content="default" time="{{ time }}" splitWithUnit theme="highlight" />
-  <view class="base-time-text"> 无底色带单位 </view>
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 无底色带单位 </text>
+  <view class="demo-count-down-content">
+    <t-count-down content="default" time="{{ time }}" splitWithUnit theme="light" />
+  </view>
 </view>
diff --git a/src/count-down/_example/base/index.wxss b/src/count-down/_example/base/index.wxss
index 0a696e059..611490f9f 100644
--- a/src/count-down/_example/base/index.wxss
+++ b/src/count-down/_example/base/index.wxss
@@ -1,20 +1,8 @@
-.flex {
-  display: flex;
-  align-items: center;
-}
-
-.base-time {
-  margin-top: 52rpx;
-  justify-content: space-between;
-}
-
-.base-time-text {
-  font-size: 20rpx;
-  color: rgba(0, 0, 0, 0.4);
-  width: 60%;
-}
-
-.base-time-cls {
-  color: #333;
-  font-weight: 700;
-}
+.demo-count-down-desc {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 28rpx;
+}
+
+.demo-count-down-content {
+  margin: 32rpx 0 48rpx;
+}
diff --git a/src/count-down/_example/count-down.json b/src/count-down/_example/count-down.json
index 47e8f6ff3..38e42b7de 100644
--- a/src/count-down/_example/count-down.json
+++ b/src/count-down/_example/count-down.json
@@ -3,6 +3,6 @@
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
     "base": "./base",
-    "sizeCountDown": "./sizeCountDown"
+    "size": "./size"
   }
 }
diff --git a/src/count-down/_example/count-down.wxml b/src/count-down/_example/count-down.wxml
index d7a3fcae4..839f79427 100644
--- a/src/count-down/_example/count-down.wxml
+++ b/src/count-down/_example/count-down.wxml
@@ -1,10 +1,10 @@
-<view class="demo-title">Count down 倒计时</view>
+<view class="demo-title">CountDown 倒计时</view>
 <view class="demo-desc">用于实时展示倒计时数值。</view>
 
-<t-demo padding title="01 类型" desc="动态倒计时间主要有时间数字和时分秒分割组成">
+<t-demo padding title="01 组件类型">
   <base />
 </t-demo>
 
-<t-demo padding title="02 规格" desc="动倒计时带底色和无底色各尺寸规格">
-  <sizeCountDown />
+<t-demo padding title="02 组件尺寸" desc="倒计时 large/medium/small 尺寸">
+  <size />
 </t-demo>
diff --git a/src/count-down/_example/sizeCountDown/index.js b/src/count-down/_example/size/index.js
similarity index 100%
rename from src/count-down/_example/sizeCountDown/index.js
rename to src/count-down/_example/size/index.js
diff --git a/src/count-down/_example/sizeCountDown/index.json b/src/count-down/_example/size/index.json
similarity index 100%
rename from src/count-down/_example/sizeCountDown/index.json
rename to src/count-down/_example/size/index.json
diff --git a/src/count-down/_example/size/index.wxml b/src/count-down/_example/size/index.wxml
new file mode 100644
index 000000000..65fe471a8
--- /dev/null
+++ b/src/count-down/_example/size/index.wxml
@@ -0,0 +1,77 @@
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 时分秒 </text>
+  <view class="demo-count-down-content">
+    <t-count-down size="small" time="{{ time }}" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down time="{{ time }}" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down size="large" time="{{ time }}" />
+  </view>
+</view>
+
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 带毫秒 </text>
+  <view class="demo-count-down-content">
+    <t-count-down size="small" format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down size="large" format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
+  </view>
+</view>
+
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 带方形底 </text>
+  <view class="demo-count-down-content">
+    <t-count-down size="small" format="HH:mm:ss" time="{{ time }}" theme="square" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down format="HH:mm:ss" time="{{ time }}" theme="square" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down size="large" format="HH:mm:ss" time="{{ time }}" theme="square" />
+  </view>
+</view>
+
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 带圆形底 </text>
+  <view class="demo-count-down-content">
+    <t-count-down size="small" format="HH:mm:ss" time="{{ time }}" theme="round" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down format="HH:mm:ss" time="{{ time }}" theme="round" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down size="large" format="HH:mm:ss" time="{{ time }}" theme="round" />
+  </view>
+</view>
+
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 带单位 </text>
+  <view class="demo-count-down-content">
+    <t-count-down size="small" format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="round" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="round" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down size="large" format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="round" />
+  </view>
+</view>
+
+<view class="demo-count-down">
+  <text class="demo-count-down-desc"> 无底色带单位 </text>
+  <view class="demo-count-down-content">
+    <t-count-down size="small" format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="light" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="light" />
+  </view>
+  <view class="demo-count-down-content">
+    <t-count-down size="large" format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="light" />
+  </view>
+</view>
diff --git a/src/count-down/_example/size/index.wxss b/src/count-down/_example/size/index.wxss
new file mode 100644
index 000000000..e75a1b6d1
--- /dev/null
+++ b/src/count-down/_example/size/index.wxss
@@ -0,0 +1,12 @@
+.demo-count-down {
+  padding-bottom: 32rpx;
+}
+
+.demo-count-down-desc {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 28rpx;
+}
+
+.demo-count-down-content {
+  margin: 24rpx 0;
+}
diff --git a/src/count-down/_example/sizeCountDown/index.wxml b/src/count-down/_example/sizeCountDown/index.wxml
deleted file mode 100644
index c7d958453..000000000
--- a/src/count-down/_example/sizeCountDown/index.wxml
+++ /dev/null
@@ -1,27 +0,0 @@
-<view class="flex spec-item">
-  <view class="spec-item-left">
-    <t-count-down content="default" time="{{ time }}" theme="square" />
-  </view>
-  <view class="spec-item-right">
-    <t-count-down time="{{ time }}" />
-  </view>
-  <view class="spec-item-after"> S </view>
-</view>
-<view class="flex spec-item">
-  <view class="spec-item-left">
-    <t-count-down content="default" time="{{ time }}" theme="square" size="middle" />
-  </view>
-  <view class="spec-item-right">
-    <t-count-down size="middle" time="{{ time }}" />
-  </view>
-  <view class="spec-item-after"> M </view>
-</view>
-<view class="flex spec-item last-padding">
-  <view class="spec-item-left">
-    <t-count-down content="default" time="{{ time }}" theme="square" size="large"> </t-count-down>
-  </view>
-  <view class="spec-item-right">
-    <t-count-down size="large" time="{{ time }}" />
-  </view>
-  <view class="spec-item-after"> L </view>
-</view>
diff --git a/src/count-down/_example/sizeCountDown/index.wxss b/src/count-down/_example/sizeCountDown/index.wxss
deleted file mode 100644
index 424168b1f..000000000
--- a/src/count-down/_example/sizeCountDown/index.wxss
+++ /dev/null
@@ -1,30 +0,0 @@
-.flex {
-  display: flex;
-  align-items: center;
-}
-
-.spec-item {
-  justify-content: space-between;
-  margin-top: 32rpx;
-}
-
-.spec-item-right {
-  width: 118 * 2rpx;
-}
-
-.spec-item-left {
-  width: 176 * 2rpx;
-}
-
-.spec-item-after {
-  font-size: 20rpx;
-  color: rgba(0, 0, 0, 0.4);
-  justify-content: center;
-  display: inline-flex;
-  align-items: center;
-  width: 30%;
-}
-
-.last-padding {
-  padding-bottom: 80rpx;
-}
diff --git a/src/count-down/count-down.less b/src/count-down/count-down.less
index 6adaddf45..6a992335d 100644
--- a/src/count-down/count-down.less
+++ b/src/count-down/count-down.less
@@ -1,134 +1,164 @@
 @import '../common/style/index.less';
 
-@countdown: ~"@{prefix}-count-down";
-@item: ~"@{countdown}__item";
-@split: ~"@{countdown}__split";
+@countdown-small-unit-margin: @spacer * 0.5; // 'small'尺寸单位分割文本左右间距
+@countdown-medium-unit-margin: @spacer * 0.625; // 'medium'尺寸单位分割文本左右间距
+@countdown-large-unit-margin: @spacer * 0.75; // 'large'尺寸单位分割文本左右间距
+@countdown-unit-color: @font-gray-1; // 带单位分割线文本颜色
+@countdown-no-unit-color: @error-color-6; // 无单位分割线文本颜色
+@countdown-large-no-unit-margin: @spacer * 0.75; // 'large'尺寸无单位分割文本左右间距
+@countdown-medium-no-unit-margin: @spacer * 0.375; // 'medium'尺寸无单位分割文本左右间距
+@countdown-small-no-unit-margin: @spacer * 0.25; // 'small'尺寸无单位分割文本左右间距
+@countdown-small-bg-width: 40rpx; // 'small'尺寸方/圆底背景宽高
+@countdown-medium-bg-width: 48rpx; // 'medium'尺寸方/圆底背景宽高
+@countdown-large-bg-width: 56rpx; // 'large'尺寸方/圆底背景宽高
+@countdown-small-default-font-size: @font-size-base; // 'small'尺寸纯数字倒计时文本大小
+@countdown-small-square-font-size: @font-size-s; // 'small'尺寸带方形底倒计时文本大小
+@countdown-small-round-font-size: @font-size-s; // 'small'尺寸带圆形底倒计时文本大小
+@countdown-small-light-font-size: @font-size-m; // 'small'尺寸高亮倒计时文本大小
+@countdown-small-unit-font-size: @font-size; // 'small'尺寸单位分割文本大小
+@countdown-small-no-unit-font-size: @font-size-base; // 'small'尺寸无单位分割文本大小
+@countdown-medium-default-font-size: @font-size-m; // 'medium'尺寸纯数字倒计时文本大小
+@countdown-medium-square-font-size: @font-size-base; // 'medium'尺寸带方形底倒计时文本大小
+@countdown-medium-round-font-size: @font-size-base; // 'medium'尺寸带圆形底倒计时文本大小
+@countdown-medium-light-font-size: @font-size * 1.8; // 'medium'尺寸高亮倒计时文本大小
+@countdown-medium-unit-font-size: @font-size-s; // 'medium'尺寸单位分割文本大小
+@countdown-medium-no-unit-font-size: @font-size-m; // 'medium'尺寸无单位分割文本大小
+@countdown-large-default-font-size: @font-size * 1.8; // 'large'尺寸纯数字倒计时文本大小
+@countdown-large-square-font-size: @font-size-m; // 'large'尺寸带方形底倒计时文本大小
+@countdown-large-round-font-size: @font-size-m; // 'large'尺寸带圆形底倒计时文本大小
+@countdown-large-light-font-size: @font-size * 1.8; // 'large'尺寸高亮倒计时文本大小
+@countdown-large-unit-font-size: @font-size-base; // 'large'尺寸单位分割文本大小
+@countdown-large-no-unit-font-size: @font-size * 1.8; // 'large'尺寸无单位分割文本大小
+
+// 纯数字倒计时文本颜色
+@countdown-default-text-color: var(--td-countdown-default-color, @font-gray-1);
+// 高亮倒计时文本颜色
+@countdown-light-color: var(--td-countdown-light-color, @error-color-6);
+// 方形/圆形底倒计时文本颜色
+@countdown-text-color: var(--td-countdown-round-color, @font-white-1);
+// 方形/圆形底背景颜色
+@countdown-bg-color: var(--td-countdown-bg-color, @error-color-6);
+
+// 带方形底倒计时圆角大小
+@countdown-square-border-radius: var(--td-countdown-square-border-radius, @radius-small);
+// 带圆形底倒计时圆角大小
+@countdown-round-border-radius: var(--td-countdown-round-border-radius, @radius-circle);
+
+@countdown: ~'@{prefix}-count-down';
+@item: ~'@{countdown}__item';
+@split: ~'@{countdown}__split';
+
+.count-down-size(@size) {
+  .@{countdown} {
+    @defaultFontSize: 'countdown-@{size}-default-font-size';
+    @roundFontSize: 'countdown-@{size}-round-font-size';
+    @squareFontSize: 'countdown-@{size}-square-font-size';
+    @lightFontSize: 'countdown-@{size}-light-font-size';
+    @width: 'countdown-@{size}-bg-width';
+    @height: 'countdown-@{size}-bg-width';
+    @dotMargin: 'countdown-@{size}-no-unit-margin';
+    @dotFontSize: 'countdown-@{size}-no-unit-font-size';
+    @textMargin: 'countdown-@{size}-unit-margin';
+    @textFontSize: 'countdown-@{size}-unit-font-size';
+
+    &--@{size} {
+      &.@{countdown}--default {
+        font-size: @@defaultFontSize;
+      }
+
+      &.@{countdown}--round {
+        > .@{item} {
+          font-size: @@roundFontSize;
+        }
+      }
+
+      &.@{countdown}--square {
+        > .@{item} {
+          font-size: @@squareFontSize;
+        }
+      }
+
+      &.@{countdown}--light {
+        > .@{item} {
+          font-size: @@lightFontSize;
+        }
+      }
+
+      &.@{countdown}--round,
+      &.@{countdown}--square {
+        > .@{item} {
+          width: @@width;
+          height: @@height;
+        }
+      }
+
+      &.@{countdown}--round,
+      &.@{countdown}--square,
+      &.@{countdown}--light {
+        > .@{split}--dot {
+          margin: 0 @@dotMargin;
+          font-size: @@dotFontSize;
+          font-weight: 700;
+        }
+
+        > .@{split}--text {
+          margin: 0 @@textMargin;
+          font-size: @@textFontSize;
+        }
+      }
+    }
+  }
+}
 
-@red: #e34d59;
-@gray: rgba(0, 0, 0, .4);
+.count-down-size(small);
+.count-down-size(medium);
+.count-down-size(large);
 
 .@{countdown} {
-  color: #323233;
-  font-size: 24rpx;
-  line-height: 34rpx;
   font-family: 'DIN Alternate', 'Courier New', Courier, monospace;
 
-  &--square {
-    .@{item} {
-      border-radius: 8rpx;
-    }
-  }
-
-  &--round {
-    .@{item} {
-      border-radius: 50%;
-    }
+  .@{item},
+  .@{split} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &--square,
-  &--round {
-    .@{item} {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;  
-      color: #fff;
-      background: @red;
-    }
-
-    .@{split} {
-      display: inline-flex;
-      align-items: center;
-      height: 40rpx;
-      margin: 0 8rpx;
-      font-size: 28rpx;
-      color: @red;
-      font-weight: 600;
-    }
-
-    .@{split}--text {
-      color: #333;
-      margin: 0 10rpx;
-      font-size: 20rpx;
-      font-weight: normal;
+  &--round,
+  &--light {
+    > .@{split}--dot {
+      color: @countdown-no-unit-color;
     }
-  }
 
-  &--small {
-    .@{item} {
-      width: 40rpx;
-      height: 40rpx;
-      font-size: 24rpx;
+    > .@{split}--text {
+      color: @countdown-unit-color;
     }
   }
 
-  &--middle {
-    .@{item} {
-      width: 48rpx;
-      height: 48rpx;
-      font-size: 28rpx;
-    }
-
-    .@{split} {
-      font-size: 32rpx;
-      font-weight: 600;
-    }
+  &--default {
+    color: @countdown-default-text-color;
   }
 
-  &--large {
-    .@{item} {
-      width: 56rpx;
-      height: 56rpx;
-      font-size: 32rpx;
-    }
+  &--square {
+    color: @countdown-text-color;
 
-    .@{split} {
-      font-size: 36rpx;
-      font-weight: 600;
+    > .@{item} {
+      border-radius: @countdown-square-border-radius;
+      background: @countdown-bg-color;
     }
   }
 
-  &--highlight {
-    .@{item} {
-      width: 40rpx;
-      height: 48rpx;
-      color: @red;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 32rpx;
-    }
+  &--round {
+    color: @countdown-text-color;
 
-    .@{split} {
-      color: #333;
-      height: 48rpx;
-      display: inline-flex;
-      align-items: center;
-      margin: 0 6rpx;
-      font-size: 20rpx;
+    > .@{item} {
+      border-radius: @countdown-round-border-radius;
+      background: @countdown-bg-color;
     }
   }
-}
-
-.base-time-square-l {
-  .item-dot {
-    color: @red;
-    height: 56rpx;
-    display: inline-flex;
-    align-items: center;
-    margin: 0 8rpx;
-    font-size: 36rpx;
-    font-weight: 600;
-  }
-}
 
-.base-time-square-m {
-  .item-dot {
-    color: @red;
-    height: 48rpx;
-    display: inline-flex;
-    align-items: center;
-    margin: 0 8rpx;
-    font-size: 32rpx;
-    font-weight: 600;
+  &--light {
+    color: @countdown-light-color;
   }
 }
diff --git a/src/count-down/count-down.ts b/src/count-down/count-down.ts
index b6162aeca..d2968452c 100644
--- a/src/count-down/count-down.ts
+++ b/src/count-down/count-down.ts
@@ -1,14 +1,14 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
-import { isSameSecond, parseFormat, parseTimeData } from './utils';
+import { isSameSecond, parseFormat, parseTimeData, TimeDataUnit } from './utils';
 
 const { prefix } = config;
 const name = `${prefix}-count-down`;
 
 @wxComponent()
 export default class CountDown extends SuperComponent {
-  externalClasses = [`${prefix}-class`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-split`];
 
   properties = props;
 
@@ -21,6 +21,7 @@ export default class CountDown extends SuperComponent {
   data = {
     prefix,
     classPrefix: name,
+    timeDataUnit: TimeDataUnit,
     timeData: parseTimeData(0),
     formattedTime: '0',
   };
@@ -67,11 +68,14 @@ export default class CountDown extends SuperComponent {
     },
 
     updateTime(remain: number) {
+      const { format } = this.properties;
       this.remain = remain;
       const timeData = parseTimeData(remain);
       this.triggerEvent('change', timeData);
-      const { timeText } = parseFormat(remain, this.properties.format as any as string);
+      const { timeText } = parseFormat(remain, format as any as string);
+      const timeRange = format.split(':');
       this.setData({
+        timeRange,
         timeData,
         formattedTime: timeText.replace(/:/g, ' : '),
       });
diff --git a/src/count-down/count-down.wxml b/src/count-down/count-down.wxml
index 6b8f0251d..a75070ed2 100644
--- a/src/count-down/count-down.wxml
+++ b/src/count-down/count-down.wxml
@@ -1,25 +1,19 @@
+<wxs module="_"> module.exports.format = function(num) { return num < 10 ? '0' + num : num; } </wxs>
+
 <view
   style="{{ customStyle }}"
-  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{size}} {{classPrefix}}--{{theme}}"
+  class="{{classPrefix}} {{classPrefix}}--{{theme}} {{classPrefix}}--{{size}} {{prefix}}-class "
 >
   <slot wx:if="{{content !== 'default'}}" />
   <block wx:elif="{{theme == 'default'}}">{{formattedTime}}</block>
   <block wx:else>
-    <text class="{{classPrefix}}__item">{{_.format(timeData.hours)}}</text>
-    <text class="{{classPrefix}}__split {{classPrefix}}__split--{{splitWithUnit ? 'text' : 'dot'}}"
-      >{{splitWithUnit ? '时' : ':'}}</text
-    >
-    <text class="{{classPrefix}}__item">{{_.format(timeData.minutes)}}</text>
-    <text class="{{classPrefix}}__split {{classPrefix}}__split--{{splitWithUnit ? 'text' : 'dot'}}"
-      >{{splitWithUnit ? '分' : ':'}}</text
-    >
-    <text class="{{classPrefix}}__item">{{_.format(timeData.seconds)}}</text>
-    <text
-      wx:if="{{splitWithUnit || millisecond}}"
-      class="{{classPrefix}}__split {{classPrefix}}__split--{{splitWithUnit ? 'text' : 'dot'}}"
-      >{{splitWithUnit ? '秒' : ':'}}</text
-    >
+    <block wx:for="{{timeRange}}" wx:key="index">
+      <text class="{{classPrefix}}__item {{prefix}}-class-count">{{_.format(timeData[timeRange[index]])}}</text>
+      <text
+        wx:if="{{ splitWithUnit || timeRange.length - 1 !== index}}"
+        class="{{classPrefix}}__split {{classPrefix}}__split--{{splitWithUnit ? 'text' : 'dot'}} {{prefix}}-class-split"
+        >{{splitWithUnit ? timeDataUnit[timeRange[index]] : ':'}}</text
+      >
+    </block>
   </block>
 </view>
-
-<wxs module="_"> module.exports.format = function(num) { return num < 10 ? '0' + num : num; } </wxs>
diff --git a/src/count-down/props.ts b/src/count-down/props.ts
index 808295bdb..1e89cf768 100644
--- a/src/count-down/props.ts
+++ b/src/count-down/props.ts
@@ -34,7 +34,7 @@ const props: TdCountDownProps = {
   /** 倒计时尺寸 */
   size: {
     type: String,
-    value: 'small',
+    value: 'medium',
   },
   /** 使用时间单位分割 */
   splitWithUnit: {
diff --git a/src/count-down/type.ts b/src/count-down/type.ts
index 4ad2aca33..901c222a0 100644
--- a/src/count-down/type.ts
+++ b/src/count-down/type.ts
@@ -67,7 +67,7 @@ export interface TdCountDownProps {
    */
   theme?: {
     type: StringConstructor;
-    value?: 'default' | 'round' | 'square';
+    value?: 'default' | 'round' | 'square' | 'light';
   };
   /**
    * 倒计时时长，单位毫秒
diff --git a/src/count-down/utils.ts b/src/count-down/utils.ts
index 5208ab4a0..1e50e938a 100644
--- a/src/count-down/utils.ts
+++ b/src/count-down/utils.ts
@@ -1,10 +1,17 @@
 export interface TimeData {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  milliseconds: number;
+  DD: number;
+  HH: number;
+  mm: number;
+  ss: number;
+  SSS: number;
 }
+export const TimeDataUnit = {
+  DD: '天',
+  HH: '时',
+  mm: '分',
+  ss: '秒',
+  SSS: '毫秒',
+};
 
 const SECOND = 1000;
 const MINUTE = 60 * SECOND;
@@ -18,11 +25,11 @@ export const parseTimeData = function (time: number): TimeData {
   const seconds = Math.floor((time % MINUTE) / SECOND);
   const milliseconds = Math.floor(time % SECOND);
   return {
-    days,
-    hours,
-    minutes,
-    seconds,
-    milliseconds,
+    DD: days,
+    HH: hours,
+    mm: minutes,
+    ss: seconds,
+    SSS: milliseconds,
   };
 };
 

From 51716a071ba0b7b4122ff3c517acbc73914790bd Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Fri, 25 Nov 2022 22:35:28 +0800
Subject: [PATCH 2/2] feat(Textarea): support hightlight theme

---
 src/count-down/README.md                      |  2 +-
 .../__test__/__snapshots__/demo.test.js.snap  |  8 +++----
 src/count-down/_example/base/index.wxml       |  2 +-
 src/count-down/_example/size/index.wxml       |  6 ++---
 src/count-down/count-down.less                | 22 +++++++++----------
 src/count-down/type.ts                        |  2 +-
 6 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/count-down/README.md b/src/count-down/README.md
index 66faf6e73..326317707 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -38,7 +38,7 @@ format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，
 millisecond | Boolean | false | 是否开启毫秒级渲染 | N
 size | String `v0.5.1` | 'medium' | 倒计时尺寸。可选项：small/medium/large | N
 split-with-unit `v0.5.1` | Boolean | false | 使用时间单位分割 | N
-theme | String `v0.5.1` | 'default' | 倒计时风格。可选项：default/round/square/light | N
+theme | String `v0.5.1` | 'default' | 倒计时风格。可选项：default/round/square/hightlight | N
 time | Number | - | 必需。倒计时时长，单位毫秒 | Y
 external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、计时器类型、分隔线类名 等。`['t-class', 't-class-count', 't-class-split']` | N
 
diff --git a/src/count-down/__test__/__snapshots__/demo.test.js.snap b/src/count-down/__test__/__snapshots__/demo.test.js.snap
index 6436cf96d..512d78dd8 100644
--- a/src/count-down/__test__/__snapshots__/demo.test.js.snap
+++ b/src/count-down/__test__/__snapshots__/demo.test.js.snap
@@ -105,7 +105,7 @@ exports[`CountDown CountDown base demo works fine 1`] = `
       <t-count-down
         content="default"
         splitWithUnit="{{true}}"
-        theme="light"
+        theme="hightlight"
         time="{{5760000}}"
       />
     </wx-view>
@@ -317,7 +317,7 @@ exports[`CountDown CountDown size demo works fine 1`] = `
         format="HH:mm:ss"
         size="small"
         splitWithUnit="{{true}}"
-        theme="light"
+        theme="hightlight"
         time="{{5760000}}"
       />
     </wx-view>
@@ -327,7 +327,7 @@ exports[`CountDown CountDown size demo works fine 1`] = `
       <t-count-down
         format="HH:mm:ss"
         splitWithUnit="{{true}}"
-        theme="light"
+        theme="hightlight"
         time="{{5760000}}"
       />
     </wx-view>
@@ -338,7 +338,7 @@ exports[`CountDown CountDown size demo works fine 1`] = `
         format="HH:mm:ss"
         size="large"
         splitWithUnit="{{true}}"
-        theme="light"
+        theme="hightlight"
         time="{{5760000}}"
       />
     </wx-view>
diff --git a/src/count-down/_example/base/index.wxml b/src/count-down/_example/base/index.wxml
index c7a2e2b11..3e3c384c2 100644
--- a/src/count-down/_example/base/index.wxml
+++ b/src/count-down/_example/base/index.wxml
@@ -36,6 +36,6 @@
 <view class="demo-count-down">
   <text class="demo-count-down-desc"> 无底色带单位 </text>
   <view class="demo-count-down-content">
-    <t-count-down content="default" time="{{ time }}" splitWithUnit theme="light" />
+    <t-count-down content="default" time="{{ time }}" splitWithUnit theme="hightlight" />
   </view>
 </view>
diff --git a/src/count-down/_example/size/index.wxml b/src/count-down/_example/size/index.wxml
index 65fe471a8..07b7e1ccb 100644
--- a/src/count-down/_example/size/index.wxml
+++ b/src/count-down/_example/size/index.wxml
@@ -66,12 +66,12 @@
 <view class="demo-count-down">
   <text class="demo-count-down-desc"> 无底色带单位 </text>
   <view class="demo-count-down-content">
-    <t-count-down size="small" format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="light" />
+    <t-count-down size="small" format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="hightlight" />
   </view>
   <view class="demo-count-down-content">
-    <t-count-down format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="light" />
+    <t-count-down format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="hightlight" />
   </view>
   <view class="demo-count-down-content">
-    <t-count-down size="large" format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="light" />
+    <t-count-down size="large" format="HH:mm:ss" time="{{ time }}" splitWithUnit theme="hightlight" />
   </view>
 </view>
diff --git a/src/count-down/count-down.less b/src/count-down/count-down.less
index 6a992335d..1a6a1b401 100644
--- a/src/count-down/count-down.less
+++ b/src/count-down/count-down.less
@@ -14,26 +14,26 @@
 @countdown-small-default-font-size: @font-size-base; // 'small'尺寸纯数字倒计时文本大小
 @countdown-small-square-font-size: @font-size-s; // 'small'尺寸带方形底倒计时文本大小
 @countdown-small-round-font-size: @font-size-s; // 'small'尺寸带圆形底倒计时文本大小
-@countdown-small-light-font-size: @font-size-m; // 'small'尺寸高亮倒计时文本大小
+@countdown-small-hightlight-font-size: @font-size-m; // 'small'尺寸高亮倒计时文本大小
 @countdown-small-unit-font-size: @font-size; // 'small'尺寸单位分割文本大小
 @countdown-small-no-unit-font-size: @font-size-base; // 'small'尺寸无单位分割文本大小
 @countdown-medium-default-font-size: @font-size-m; // 'medium'尺寸纯数字倒计时文本大小
 @countdown-medium-square-font-size: @font-size-base; // 'medium'尺寸带方形底倒计时文本大小
 @countdown-medium-round-font-size: @font-size-base; // 'medium'尺寸带圆形底倒计时文本大小
-@countdown-medium-light-font-size: @font-size * 1.8; // 'medium'尺寸高亮倒计时文本大小
+@countdown-medium-hightlight-font-size: @font-size * 1.8; // 'medium'尺寸高亮倒计时文本大小
 @countdown-medium-unit-font-size: @font-size-s; // 'medium'尺寸单位分割文本大小
 @countdown-medium-no-unit-font-size: @font-size-m; // 'medium'尺寸无单位分割文本大小
 @countdown-large-default-font-size: @font-size * 1.8; // 'large'尺寸纯数字倒计时文本大小
 @countdown-large-square-font-size: @font-size-m; // 'large'尺寸带方形底倒计时文本大小
 @countdown-large-round-font-size: @font-size-m; // 'large'尺寸带圆形底倒计时文本大小
-@countdown-large-light-font-size: @font-size * 1.8; // 'large'尺寸高亮倒计时文本大小
+@countdown-large-hightlight-font-size: @font-size * 1.8; // 'large'尺寸高亮倒计时文本大小
 @countdown-large-unit-font-size: @font-size-base; // 'large'尺寸单位分割文本大小
 @countdown-large-no-unit-font-size: @font-size * 1.8; // 'large'尺寸无单位分割文本大小
 
 // 纯数字倒计时文本颜色
 @countdown-default-text-color: var(--td-countdown-default-color, @font-gray-1);
 // 高亮倒计时文本颜色
-@countdown-light-color: var(--td-countdown-light-color, @error-color-6);
+@countdown-hightlight-color: var(--td-countdown-hightlight-color, @error-color-6);
 // 方形/圆形底倒计时文本颜色
 @countdown-text-color: var(--td-countdown-round-color, @font-white-1);
 // 方形/圆形底背景颜色
@@ -53,7 +53,7 @@
     @defaultFontSize: 'countdown-@{size}-default-font-size';
     @roundFontSize: 'countdown-@{size}-round-font-size';
     @squareFontSize: 'countdown-@{size}-square-font-size';
-    @lightFontSize: 'countdown-@{size}-light-font-size';
+    @hightlightFontSize: 'countdown-@{size}-hightlight-font-size';
     @width: 'countdown-@{size}-bg-width';
     @height: 'countdown-@{size}-bg-width';
     @dotMargin: 'countdown-@{size}-no-unit-margin';
@@ -78,9 +78,9 @@
         }
       }
 
-      &.@{countdown}--light {
+      &.@{countdown}--hightlight {
         > .@{item} {
-          font-size: @@lightFontSize;
+          font-size: @@hightlightFontSize;
         }
       }
 
@@ -94,7 +94,7 @@
 
       &.@{countdown}--round,
       &.@{countdown}--square,
-      &.@{countdown}--light {
+      &.@{countdown}--hightlight {
         > .@{split}--dot {
           margin: 0 @@dotMargin;
           font-size: @@dotFontSize;
@@ -126,7 +126,7 @@
 
   &--square,
   &--round,
-  &--light {
+  &--hightlight {
     > .@{split}--dot {
       color: @countdown-no-unit-color;
     }
@@ -158,7 +158,7 @@
     }
   }
 
-  &--light {
-    color: @countdown-light-color;
+  &--hightlight {
+    color: @countdown-hightlight-color;
   }
 }
diff --git a/src/count-down/type.ts b/src/count-down/type.ts
index 901c222a0..add28c7a9 100644
--- a/src/count-down/type.ts
+++ b/src/count-down/type.ts
@@ -67,7 +67,7 @@ export interface TdCountDownProps {
    */
   theme?: {
     type: StringConstructor;
-    value?: 'default' | 'round' | 'square' | 'light';
+    value?: 'default' | 'round' | 'square' | 'hightlight';
   };
   /**
    * 倒计时时长，单位毫秒