@oceanbase/codemod 0.4.16 → 1.0.0-alpha.0

package/README.md

@@ -181,12 +181,12 @@ transform fixed style to antd v5 design token.
 +   const { token } = theme.useToken();
     return (
 -     <div>
--       <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
--       <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f' }}></Button>
+-       <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+-       <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f', fontSize: 12 }}></Button>
 -     </div>
 +     <div>
-+       <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-+       <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
++       <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
++       <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
 +     </div>
     );
   };
@@ -210,13 +210,13 @@ export default Demo;
     render() {
       return (
 -       <div>
--         <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '#d9d9d9' }} />
--         <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f' }}></Button>
+-         <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '#d9d9d9', fontSize: 14 }} />
+-         <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f', fontSize: 12 }}></Button>
 -         <div color="#fafafa" border="1px solid #fafafa" />
 -       </div>
 +       <div>
-+         <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBgLayout}` }} />
-+         <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
++         <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBgLayout}`, fontSize: token.fontSize }} />
++         <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
 +         <div color={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
 +       </div>
       );
@@ -240,11 +240,13 @@ export default Demo;
 -   warning: '#faad14',
 -   error: '#ff4d4f',
 -   border: '1px solid #d9d9d9',
+-   fontSize: 14,
 +   info: token.colorInfo,
 +   success: token.colorSuccess,
 +   warning: token.colorWarning,
 +   error: token.colorError,
 +   border: `1px solid ${token.colorBorder}`,
++   fontSize: token.fontSize,
   };
 
   function getColorList() {
@@ -274,6 +276,11 @@ export default Demo;
 -       color: '1px solid #d9d9d9',
 +       color: `1px solid ${token.colorBorder}`,
       },
+      {
+        type: 'fontSize',
+-       fontSize: 14,
++       fontSize: token.fontSize,
+      }
     ];
   }
 ```
@@ -289,19 +296,23 @@ transform fixed less style to antd v5 design token.
 -   background: #52c41a;
 -   background-color: #faad14;
 -   border-color: #ff4d4f;
+-   font-size: 14px;
 +   color: @colorInfo;
 +   background: @colorSuccess;
 +   background-color: @colorWarning;
 +   border-color: @colorError;
++   font-size: @fontSize;
     .content {
 -     color: rgba(0, 0, 0, 0.85);
 -     background: rgba(0, 0, 0,0.65);
 -     background-color: rgba(0,0,0,0.45);
 -     border: 1px solid #d9d9d9;
+-     font-size: 12px;
 +     color: @colorText;
 +     background: @colorTextSecondary;
 +     background-color: @colorTextTertiary;
 +     border: 1px solid @colorBorder;
++     font-size: @fontSizeSM;
     }
   }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.4.16",
+  "version": "1.0.0-alpha.0",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -23,7 +23,7 @@
     "build": "father build"
   },
   "dependencies": {
-    "@oceanbase/design": "^0.4.16",
+    "@oceanbase/design": "^1.0.0-alpha.0",
     "chalk": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^5.1.1",
@@ -47,5 +47,5 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2"
   },
-  "gitHead": "42879f277f4c72e7254f121861f9e8b8a8e024ce"
+  "gitHead": "1aff1c2acc2b9494ff83a86ed597b9f46a08f59c"
 }

package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less

@@ -4,10 +4,12 @@
   background-color: #faad14;
   border-color: #ff4d4f;
   scrollbar-color: #ffffff;
+  font-size: 14px;
   .content {
     color: rgba(0, 0, 0, 0.85);
     background: rgba(0, 0, 0,0.65);
     background-color: rgba(0,0,0,0.45);
     border: 1px solid #d9d9d9;
+    font-size: 12px;
   }
 }

package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less

@@ -5,10 +5,12 @@
   background-color: @colorWarning;
   border-color: @colorError;
   scrollbar-color: @colorBgContainer;
+  font-size: @fontSize;
   .content {
     color: @colorText;
     background: @colorTextSecondary;
     background-color: @colorTextTertiary;
     border: 1px solid @colorBorder;
+    font-size: @fontSizeSM;
   }
 }

package/transforms/__testfixtures__/less-to-token/case-insensitive.input.less

@@ -4,10 +4,12 @@
   background-color: #FAAD14;
   border-color: #FF4D4F;
   scrollbar-color: #FFFFFF;
+  font-size: 14px;
   .content {
     color: rgba(0, 0, 0, 0.85);
     background: rgba(0, 0, 0,0.65);
     background-color: rgba(0,0,0,0.45);
     border: 1px solid #D9D9D9;
+    font-size: 12px;
   }
 }

package/transforms/__testfixtures__/less-to-token/case-insensitive.output.less

@@ -5,10 +5,12 @@
   background-color: @colorWarning;
   border-color: @colorError;
   scrollbar-color: @colorBgContainer;
+  font-size: @fontSize;
   .content {
     color: @colorText;
     background: @colorTextSecondary;
     background-color: @colorTextTertiary;
     border: 1px solid @colorBorder;
+    font-size: @fontSizeSM;
   }
 }

package/transforms/__testfixtures__/less-to-token/mixin.input.less

@@ -4,6 +4,7 @@
   background-color: #faad14;
   border-color: #ff4d4f;
   scrollbar-color: #ffffff;
+  font-size: 14px;
 }
 
 .mixin-2 {
@@ -12,6 +13,7 @@
   background-color: #faad14;
   border-color: #ff4d4f;
   scrollbar-color: #ffffff;
+  font-size: 14px;
 }
 
 .container {
@@ -22,5 +24,6 @@
     background: rgba(0, 0, 0,0.65);
     background-color: rgba(0,0,0,0.45);
     border: 1px solid #d9d9d9;
+    font-size: 12px;
   }
 }

package/transforms/__testfixtures__/less-to-token/mixin.output.less

@@ -6,6 +6,7 @@
   background-color: @colorWarning;
   border-color: @colorError;
   scrollbar-color: @colorBgContainer;
+  font-size: @fontSize;
 }
 
 .mixin-2 {
@@ -14,6 +15,7 @@
   background-color: @colorWarning;
   border-color: @colorError;
   scrollbar-color: @colorBgContainer;
+  font-size: @fontSize;
 }
 
 .container {
@@ -24,5 +26,6 @@
     background: @colorTextSecondary;
     background-color: @colorTextTertiary;
     border: 1px solid @colorBorder;
+    font-size: @fontSizeSM;
   }
 }

package/transforms/__testfixtures__/less-to-token/obui-less-to-token.input.less

@@ -5,11 +5,13 @@
   background: @colorSuccess;
   background-color: @colorWarning;
   border-color: @colorError;
+  font-size: 14px;
   .content {
     color: rgba(0, 0, 0, 0.85);
     background: rgba(0, 0, 0,0.65);
     background-color: rgba(0,0,0,0.45);
     border-color: rgb(0 0 0 / 45%);
     border: 1px solid #d9d9d9;
+    font-size: 12px;
   }
 }

package/transforms/__testfixtures__/less-to-token/obui-less-to-token.output.less

@@ -4,11 +4,13 @@
   background: @colorSuccess;
   background-color: @colorWarning;
   border-color: @colorError;
+  font-size: @fontSize;
   .content {
     color: @colorText;
     background: @colorTextSecondary;
     background-color: @colorTextTertiary;
     border-color: @colorTextTertiary;
     border: 1px solid @colorBorder;
+    font-size: @fontSizeSM;
   }
 }

package/transforms/__testfixtures__/less-to-token/obui-less-token-to-token.input.less

@@ -5,4 +5,5 @@
   background: @colorSuccess;
   background-color: @colorWarning;
   border-color: @colorError;
+  font-size: 14px;
 }

package/transforms/__testfixtures__/less-to-token/obui-less-token-to-token.output.less

@@ -4,4 +4,5 @@
   background: @colorSuccess;
   background-color: @colorWarning;
   border-color: @colorError;
+  font-size: @fontSize;
 }

package/transforms/__testfixtures__/style-to-token/antd-style.input.js

@@ -4,6 +4,7 @@ const useStyle1 = createStyles(() => {
   return {
     main: {
       background: '#1890ff',
+      fontSize: 14,
     },
   };
 });
@@ -12,6 +13,7 @@ const useStyle2 = createStyles(({}) => {
   return {
     main: {
       background: '#1890ff',
+      fontSize: 14,
     },
   };
 });
@@ -20,6 +22,7 @@ const useStyle3 = createStyles(({ token }) => {
   return {
     main: {
       background: '#1890ff',
+      fontSize: 14,
     },
   };
 });

package/transforms/__testfixtures__/style-to-token/antd-style.output.js

@@ -8,6 +8,7 @@ const useStyle1 = createStyles((
   return {
     main: {
       background: token.colorInfo,
+      fontSize: token.fontSize,
     },
   };
 });
@@ -18,6 +19,7 @@ const useStyle2 = createStyles(({
   return {
     main: {
       background: token.colorInfo,
+      fontSize: token.fontSize,
     },
   };
 });
@@ -26,6 +28,7 @@ const useStyle3 = createStyles(({ token }) => {
   return {
     main: {
       background: token.colorInfo,
+      fontSize: token.fontSize,
     },
   };
 });

package/transforms/__testfixtures__/style-to-token/block-statement.input.js

@@ -20,5 +20,9 @@ function getColorList() {
       type: 'border',
       color: '1px solid #d9d9d9',
     },
+    {
+      type: 'fontSize',
+      fontSize: 14,
+    },
   ];
 }

package/transforms/__testfixtures__/style-to-token/block-statement.output.js

@@ -21,5 +21,9 @@ function getColorList() {
       type: 'border',
       color: `1px solid ${token.colorBorder}`,
     },
+    {
+      type: 'fontSize',
+      fontSize: token.fontSize,
+    },
   ];
 }

package/transforms/__testfixtures__/style-to-token/class-component.input.js

@@ -10,8 +10,8 @@ class Demo extends React.PureComponent {
   render() {
     return (
       <div>
-        <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-        <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+        <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+        <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       </div>
     );
   }

package/transforms/__testfixtures__/style-to-token/class-component.output.js

@@ -10,8 +10,8 @@ class Demo extends React.PureComponent {
   render() {
     return (
       <div>
-        <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-        <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+        <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+        <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       </div>
     );
   }

package/transforms/__testfixtures__/style-to-token/existed-useToken.input.js

@@ -5,8 +5,8 @@ const Demo = () => {
   const { token } = theme.useToken();
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/existed-useToken.output.js

@@ -5,8 +5,8 @@ const Demo = () => {
   const { token } = theme.useToken();
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/function-component.input.js

@@ -5,8 +5,8 @@ function Demo1() {
   const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );
@@ -16,8 +16,8 @@ const Demo2 = () => {
   const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/function-component.output.js

@@ -6,8 +6,8 @@ function Demo1() {
   const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );
@@ -18,8 +18,8 @@ const Demo2 = () => {
   const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/function.input.js

@@ -5,8 +5,8 @@ function getComponent1() {
   const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );
@@ -16,8 +16,8 @@ const getComponent2 = () => {
   const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );
@@ -27,8 +27,8 @@ export default () => {
   const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/function.output.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Alert, Button, token, Tooltip } from '@oceanbase/design';
+import { Alert, Button, Tooltip, token } from '@oceanbase/design';
 
 function getComponent1() {
   const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );
@@ -16,8 +16,8 @@ const getComponent2 = () => {
   const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );
@@ -27,8 +27,8 @@ export default () => {
   const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/hooks.input.js

@@ -5,8 +5,8 @@ function useComponent1 () {
   const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );
@@ -16,8 +16,8 @@ const useComponent2 = () => {
   const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/hooks.output.js

@@ -6,8 +6,8 @@ function useComponent1 () {
   const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );
@@ -18,8 +18,8 @@ const useComponent2 = () => {
   const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/nested-block-statement.input.js

@@ -4,13 +4,13 @@ import { Alert, Button, Tooltip } from '@oceanbase/design';
 const Demo = () => {
   const columns = [{
     render: () => {
-      return <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />;
+      return <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" style={{ fontSize: 14 }} />;
     },
   }];
   return (
     <div>
-      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
     </div>
   );
 };

package/transforms/__testfixtures__/style-to-token/nested-block-statement.output.js

@@ -5,13 +5,13 @@ const Demo = () => {
   const { token } = theme.useToken();
   const columns = [{
     render: () => {
-      return <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />;
+      return <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} style={{ fontSize: token.fontSize }} />;
     },
   }];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
     </div>
   );
 };

package/transforms/__testfixtures__/style-to-token/top-identifier.input.js

@@ -7,4 +7,5 @@ const colorMap = {
   warning: '#faad14',
   error: '#ff4d4f',
   border: '1px solid #d9d9d9',
+  fontSize: 14,
 };

package/transforms/__testfixtures__/style-to-token/top-identifier.output.js

@@ -8,4 +8,5 @@ const colorMap = {
   warning: token.colorWarning,
   error: token.colorError,
   border: `1px solid ${token.colorBorder}`,
+  fontSize: token.fontSize,
 };

package/transforms/less-to-token.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 const postcss = require('postcss');
 const postcssLess = require('postcss-less');
 const isDirectory = require('is-directory');
-const { tokenParse } = require('./utils/token');
+const { tokenParse, propertyTokenParse } = require('./utils/token');
 
 /**
  * 搜索目录下所有的less文件
@@ -42,12 +42,22 @@ async function transform(file) {
   // 遍历 AST
   ast.walk(node => {
     if (node.type === 'decl') {
-      const { key, token, formattedValue } = tokenParse(node.value);
-      if (token) {
-        node.value = formattedValue.replace(key, `@${token}`);
-        hasToken = true;
-      } else if (node.value?.includes('@')) {
+      // 首先尝试基于属性的 token 转换
+      // 将 CSS 属性名转换为小驼峰写法（如 font-size -> fontSize）
+      const camelCaseProp = node.prop.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+      const propertyResult = propertyTokenParse(camelCaseProp, node.value);
+      if (propertyResult) {
+        node.value = `@${propertyResult.token}`;
         hasToken = true;
+      } else {
+        // 然后尝试基于值的 token 转换
+        const { key, token, formattedValue } = tokenParse(node.value);
+        if (token) {
+          node.value = formattedValue.replace(key, `@${token}`);
+          hasToken = true;
+        } else if (node.value?.includes('@')) {
+          hasToken = true;
+        }
       }
     } else if (node.type === 'atrule' && node.name === 'import') {
       if (node.params === "'~@oceanbase/design/es/theme/index.less'") {

package/transforms/style-to-token.js

@@ -1,28 +1,17 @@
 const { upperFirst } = require('lodash');
 const { addSubmoduleImport } = require('./utils');
-const { tokenParse } = require('./utils/token');
+const { tokenParse, propertyTokenParse } = require('./utils/token');
 const { printOptions } = require('./utils/config');
 
+// 判断当前 path 是否为顶层 BlockStatement
 function isTopBlockStatement(path) {
+  // 判断当前节点类型是否为 BlockStatement
   const isBlockStatement = path.value.type === 'BlockStatement';
   let isTop = isBlockStatement && true;
   path = path.parentPath;
+  // 向上遍历父节点，直到遇到 Program 节点
   while (isTop && path.value.type !== 'Program') {
-    // isTopBlockStatement => not wrapped by BlockStatement
-    if (path.value.type === 'BlockStatement') {
-      isTop = false;
-      break;
-    }
-    path = path.parentPath;
-  }
-  return isTop;
-}
-
-function isTopIdentifier(path) {
-  let isTop = true;
-  path = path.parentPath;
-  while (isTop && path.value.type !== 'Program') {
-    // isTopIdentifier => not wrapped by BlockStatement
+    // 如果父节点也是 BlockStatement，则当前不是顶层 BlockStatement
     if (path.value.type === 'BlockStatement') {
       isTop = false;
       break;
@@ -32,6 +21,7 @@ function isTopIdentifier(path) {
   return isTop;
 }
 
+// 判断字符串首字母是否为大写
 function isFirstUpperCase(str) {
   return upperFirst(str) === str;
 }
@@ -42,7 +32,160 @@ function shorthandProperty(property) {
   return property;
 }
 
-function importComponent(j, root, options) {
+// 包装 JSX 属性值
+function wrapJSXValue(value, isJSXAttribute) {
+  return isJSXAttribute ? `{${value}}` : value;
+}
+
+// 检查是否为 React 组件或 Hook
+function isReactComponentOrHook(functionName) {
+  return functionName && (isFirstUpperCase(functionName) || functionName.startsWith('use'));
+}
+
+// 检查 BlockStatement 中是否包含 token 使用
+function hasTokenUsage(j, path) {
+  return (
+    j(path).find(j.Identifier, {
+      name: name => name?.includes('token.'),
+    }).length > 0
+  );
+}
+
+// 检查 BlockStatement 中是否包含 useToken 语句
+function hasUseTokenStatement(j, path) {
+  return (
+    j(path).find(j.Identifier, {
+      name: name => name.includes('useToken'),
+    }).length > 0
+  );
+}
+
+// 获取函数名称
+function getFunctionName(path) {
+  const parentType = path.parentPath.value?.type;
+  if (parentType === 'FunctionDeclaration') {
+    return path.parentPath.value?.id?.name;
+  }
+  if (parentType === 'ArrowFunctionExpression') {
+    return path.parentPath.parentPath?.value?.id?.name;
+  }
+  return undefined;
+}
+
+// 创建 token 对象模式
+function createTokenObjectPattern(j) {
+  return j.objectPattern([
+    shorthandProperty(j.property('init', j.identifier('token'), j.identifier('token'))),
+  ]);
+}
+
+// 检查对象模式中是否包含 token 属性
+function hasTokenInObjectPattern(param) {
+  return param.properties.some(p => p.type === 'ObjectProperty' && p.key && p.key.name === 'token');
+}
+
+function processCreateStylesParams(j, root) {
+  const processedCreateStyles = new Set();
+
+  root
+    .find(j.CallExpression, {
+      callee: { name: 'createStyles' },
+    })
+    .forEach(path => {
+      const arrowFunc = path.value.arguments[0];
+      if (arrowFunc && arrowFunc.type === 'ArrowFunctionExpression') {
+        processedCreateStyles.add(path);
+
+        if (arrowFunc.params.length > 0) {
+          const param = arrowFunc.params[0];
+          if (param.type === 'ObjectPattern' && !hasTokenInObjectPattern(param)) {
+            // 如果参数对象中没有 token 属性，则插入 token 属性
+            param.properties.push(
+              shorthandProperty(j.property('init', j.identifier('token'), j.identifier('token')))
+            );
+          } else if (param.type !== 'ObjectPattern') {
+            // 如果参数不是对象结构，则替换为 { token }
+            arrowFunc.params[0] = createTokenObjectPattern(j);
+          }
+        } else {
+          // 如果没有参数，则插入 { token }
+          arrowFunc.params = [createTokenObjectPattern(j)];
+        }
+      }
+    });
+
+  return processedCreateStyles;
+}
+
+// 添加 token 导入到 BlockStatement
+function addTokenImportToBlockStatement(j, root, path) {
+  const includeJSXElement = j(path).find(j.JSXElement).length > 0;
+  const functionName = getFunctionName(path);
+
+  if (includeJSXElement && isReactComponentOrHook(functionName)) {
+    const insertString = 'const { token } = theme.useToken()';
+    path.get('body').value.unshift(j.expressionStatement(j.identifier(insertString)));
+    addSubmoduleImport(j, root, {
+      moduleName: '@oceanbase/design',
+      importedName: 'theme',
+      importKind: 'value',
+    });
+  }
+}
+
+// 为函数组件和类组件添加 token 到现有导入
+function addTokenToExistingImport(j, root) {
+  // 检查是否已经导入了 useToken 或 theme
+  const hasUseTokenImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: '@oceanbase/design' },
+      })
+      .find(j.ImportSpecifier, {
+        imported: { name: 'useToken' },
+      }).length > 0;
+
+  const hasThemeImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: '@oceanbase/design' },
+      })
+      .find(j.ImportSpecifier, {
+        imported: { name: 'theme' },
+      }).length > 0;
+
+  // 如果已经有 useToken 或 theme 导入，不需要添加 token 导入
+  if (hasUseTokenImport || hasThemeImport) {
+    return;
+  }
+
+  // 查找所有从 @oceanbase/design 的导入
+  const importDeclarations = root.find(j.ImportDeclaration, {
+    source: { value: '@oceanbase/design' },
+  });
+
+  if (importDeclarations.length === 0) {
+    return;
+  }
+
+  importDeclarations.forEach(importPath => {
+    const specifiers = importPath.value.specifiers;
+
+    // 检查是否已经有 token 导入
+    const hasTokenImport = specifiers.some(
+      spec => spec.type === 'ImportSpecifier' && spec.imported.name === 'token'
+    );
+
+    if (!hasTokenImport) {
+      // 添加 token 导入
+      const tokenSpecifier = j.importSpecifier(j.identifier('token'));
+      specifiers.push(tokenSpecifier);
+    }
+  });
+}
+
+// 处理字符串字面量的 token 替换
+function processStringLiterals(j, root) {
   let hasChanged = false;
 
   const stringList = root.find(j.StringLiteral, {
@@ -51,130 +194,185 @@ function importComponent(j, root, options) {
       return !!token;
     },
   });
+
   if (stringList.length > 0) {
-    // replace fixed style to token
     stringList.replaceWith(path => {
       hasChanged = true;
       const { key, token, formattedValue } = tokenParse(path.value.value);
       const isJSXAttribute = path.parentPath.value.type === 'JSXAttribute';
-      let stringValue = `token.${token}`;
-      let templateStringValue = `\`${formattedValue.replace(key, `\${token.${token}}`)}\``;
-      // add {} wrapper for JSXAttribute
-      if (isJSXAttribute) {
-        stringValue = `{${stringValue}}`;
-        templateStringValue = `{${templateStringValue}}`;
+
+      console.log(
+        'Processing string:',
+        path.value.value,
+        'isJSXAttribute:',
+        isJSXAttribute,
+        'formattedValue:',
+        formattedValue,
+        'key:',
+        key
+      );
+
+      if (formattedValue === key) {
+        // 完全匹配的情况，直接返回 token.xxx
+        const memberExpression = j.memberExpression(j.identifier('token'), j.identifier(token));
+        return isJSXAttribute ? j.jsxExpressionContainer(memberExpression) : memberExpression;
+      } else {
+        // 部分匹配的情况，返回模板字符串
+        const beforeToken = formattedValue.replace(key, '');
+        const templateString = j.templateLiteral(
+          [
+            j.templateElement({ raw: beforeToken, cooked: beforeToken }, false),
+            j.templateElement({ raw: '', cooked: '' }, true),
+          ],
+          [j.memberExpression(j.identifier('token'), j.identifier(token))]
+        );
+        return isJSXAttribute ? j.jsxExpressionContainer(templateString) : templateString;
       }
-      return formattedValue === key ? j.identifier(stringValue) : j.identifier(templateStringValue);
     });
 
+    // 为包含 token 使用的顶级 BlockStatement 添加导入
     root
       .find(j.BlockStatement)
-      // avoid duplicate insert for nested block statement
       .filter(path => isTopBlockStatement(path))
       .forEach(path => {
-        const includeToken =
-          j(path).find(j.Identifier, {
-            name: name => name?.includes('token.'),
-          }).length > 0;
-        if (includeToken) {
-          const includeJSXElement = j(path).find(j.JSXElement).length > 0;
-          const includeUseTokenStatement =
-            j(path).find(j.Identifier, {
-              name: name => name.includes('useToken'),
-            }).length > 0;
-          const parentType = path.parentPath.value?.type;
-          const functionName =
-            parentType === 'FunctionDeclaration'
-              ? path.parentPath.value?.id?.name
-              : parentType === 'ArrowFunctionExpression'
-                ? path.parentPath.parentPath?.value?.id?.name
-                : undefined;
-          const calleeName = path.parentPath.parentPath?.parentPath?.value?.callee?.name;
-          if (
-            includeJSXElement &&
-            functionName &&
-            // React function component or React hooks
-            (isFirstUpperCase(functionName) || functionName.startsWith('use'))
-          ) {
-            // avoid duplicate insert when it's existed
-            if (!includeUseTokenStatement) {
-              const insertString = 'const { token } = theme.useToken()';
-              // insert `const { token } = theme.useToken()`
-              path.get('body').value.unshift(j.expressionStatement(j.identifier(insertString)));
-              // import `theme` from @oceanbase/design
-              addSubmoduleImport(j, root, {
-                moduleName: '@oceanbase/design',
-                importedName: 'theme',
-                importKind: 'value',
-              });
-            }
-          }
-          // antd-style createStyles
-          else if (parentType === 'ArrowFunctionExpression' && calleeName === 'createStyles') {
-            const arrowFunc = path.parentPath?.parentPath?.value?.[0];
-            if (arrowFunc && arrowFunc.type === 'ArrowFunctionExpression') {
-              let hasToken = false;
-              if (arrowFunc.params.length > 0) {
-                const param = arrowFunc.params[0];
-                if (param.type === 'ObjectPattern') {
-                  hasToken = param.properties.some(
-                    p => p.type === 'ObjectProperty' && p.key && p.key.name === 'token'
-                  );
-                  // 如果参数对象中没有 token 属性，则插入 token 属性
-                  if (!hasToken) {
-                    param.properties.push(
-                      shorthandProperty(
-                        j.property('init', j.identifier('token'), j.identifier('token'))
-                      )
-                    );
-                  }
-                } else {
-                  // 如果参数不是对象结构，则替换为 { token }
-                  arrowFunc.params[0] = j.objectPattern([
-                    shorthandProperty(
-                      j.property('init', j.identifier('token'), j.identifier('token'))
-                    ),
-                  ]);
-                }
-              } else {
-                // 如果没有参数，则插入 { token }
-                arrowFunc.params = [
-                  j.objectPattern([
-                    shorthandProperty(
-                      j.property('init', j.identifier('token'), j.identifier('token'))
-                    ),
-                  ]),
-                ];
-              }
-            }
-          } else {
-            // React class component and static file (not react component)
-            // import `token` from @oceanbase/design
-            addSubmoduleImport(j, root, {
-              moduleName: '@oceanbase/design',
-              importedName: 'token',
-              importKind: 'value',
-            });
-          }
+        if (hasTokenUsage(j, path) && !hasUseTokenStatement(j, path)) {
+          addTokenImportToBlockStatement(j, root, path);
         }
       });
+  }
 
-    root
-      .find(j.Identifier)
-      .filter(path => isTopIdentifier(path) && path.value.name?.includes('token.'))
-      .forEach(() => {
-        // import `token` from @oceanbase/design
-        addSubmoduleImport(j, root, {
-          moduleName: '@oceanbase/design',
-          importedName: 'token',
-          importKind: 'value',
-        });
-      });
+  return hasChanged;
+}
+
+function importComponent(j, root, options) {
+  let hasChanged = false;
+
+  // 处理字符串字面量
+  hasChanged = processStringLiterals(j, root) || hasChanged;
+
+  // 处理对象属性值（如 fontSize: 14）
+  const objectPropertyChanged = processObjectProperties(j, root);
+  hasChanged = objectPropertyChanged || hasChanged;
+
+  return hasChanged;
+}
+
+// 处理对象属性
+function processObjectProperties(j, root) {
+  let hasChanged = false;
+
+  const objectPropertyList = root.find(j.ObjectProperty, {
+    key: { type: 'Identifier' },
+    value: { type: 'NumericLiteral' },
+  });
+
+  if (objectPropertyList.length > 0) {
+    objectPropertyList.replaceWith(path => {
+      const propertyName = path.value.key.name;
+      const propertyValue = path.value.value.value;
+
+      const tokenResult = propertyTokenParse(propertyName, propertyValue);
+      if (tokenResult) {
+        hasChanged = true;
+        const isJSXAttribute = path.parentPath.value.type === 'JSXAttribute';
+        const stringValue = wrapJSXValue(`token.${tokenResult.token}`, isJSXAttribute);
+        return j.objectProperty(j.identifier(propertyName), j.identifier(stringValue));
+      }
+      return path.value;
+    });
+
+    // 如果发生了替换，需要添加 token 导入
+    if (hasChanged) {
+      addTokenImportsForObjectProperties(j, root);
+    }
   }
 
   return hasChanged;
 }
 
+// 为对象属性添加 token 导入
+function addTokenImportsForObjectProperties(j, root) {
+  root
+    .find(j.BlockStatement)
+    .filter(path => isTopBlockStatement(path))
+    .forEach(path => {
+      if (hasTokenUsage(j, path) && !hasUseTokenStatement(j, path)) {
+        const calleeName = path.parentPath.parentPath?.parentPath?.value?.callee?.name;
+        // 跳过 createStyles 的情况，因为已经在上面处理了
+        if (calleeName !== 'createStyles') {
+          addTokenImportToBlockStatement(j, root, path);
+        }
+      }
+    });
+}
+
+// 检查是否应该添加顶层 token 导入
+function shouldAddTopLevelTokenImport(j, root) {
+  // 检查是否有 createStyles 调用
+  const hasCreateStyles =
+    root.find(j.CallExpression, {
+      callee: { name: 'createStyles' },
+    }).length > 0;
+
+  // 检查是否使用了 theme.useToken()
+  const hasThemeUseToken =
+    root.find(j.CallExpression, {
+      callee: {
+        type: 'MemberExpression',
+        object: { name: 'theme' },
+        property: { name: 'useToken' },
+      },
+    }).length > 0;
+
+  // 检查是否导入了 theme
+  const hasThemeImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: '@oceanbase/design' },
+      })
+      .find(j.ImportSpecifier, {
+        imported: { name: 'theme' },
+      }).length > 0;
+
+  // 检查是否已经导入了 token
+  const hasTokenImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: '@oceanbase/design' },
+      })
+      .find(j.ImportSpecifier, {
+        imported: { name: 'token' },
+      }).length > 0;
+
+  // 检查是否有 token.xxx 的使用
+  const hasTokenUsage =
+    root.find(j.MemberExpression, {
+      object: { name: 'token' },
+    }).length > 0;
+
+  // 如果已经有 token 导入，不需要添加
+  if (hasTokenImport) {
+    return false;
+  }
+
+  // 如果有 createStyles 或 theme.useToken() 或 theme 导入，不需要添加顶层 token 导入
+  if (hasCreateStyles || hasThemeUseToken || hasThemeImport) {
+    return false;
+  }
+
+  // 如果有 token.xxx 的使用，需要添加导入
+  return hasTokenUsage;
+}
+
+// 添加顶层 token 导入
+function addTopLevelTokenImport(j, root) {
+  addSubmoduleImport(j, root, {
+    moduleName: '@oceanbase/design',
+    importedName: 'token',
+    importKind: 'value',
+  });
+}
+
 module.exports = (file, api, options) => {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -182,5 +380,38 @@ module.exports = (file, api, options) => {
   let hasChanged = false;
   hasChanged = importComponent(j, root, options) || hasChanged;
 
+  // 处理 createStyles 函数的参数
+  if (hasChanged) {
+    processCreateStylesParams(j, root);
+  }
+
+  // 如果有变化，检查是否需要添加 token 导入
+  if (hasChanged) {
+    // 检查是否有 token 使用
+    const hasTokenUsage =
+      root.find(j.MemberExpression, {
+        object: { name: 'token' },
+      }).length > 0;
+
+    if (hasTokenUsage) {
+      // 使用 shouldAddTopLevelTokenImport 函数来判断是否需要添加 token 导入
+      if (shouldAddTopLevelTokenImport(j, root)) {
+        // 检查是否有 @oceanbase/design 的导入
+        const hasOceanbaseImport =
+          root.find(j.ImportDeclaration, {
+            source: { value: '@oceanbase/design' },
+          }).length > 0;
+
+        if (hasOceanbaseImport) {
+          // 如果有 @oceanbase/design 导入，添加到现有导入
+          addTokenToExistingImport(j, root);
+        } else {
+          // 如果没有 @oceanbase/design 导入，添加顶层 token 导入
+          addTopLevelTokenImport(j, root);
+        }
+      }
+    }
+  }
+
   return hasChanged ? root.toSource(options.printOptions || printOptions) : null;
 };

package/transforms/utils/token.js

@@ -35,6 +35,7 @@ const TOKEN_MAP = {
   '#1677ff': 'colorInfo',
   '#1890ff': 'colorInfo',
   '#40a9ff': 'colorInfo',
+  '#006aff': 'colorInfo',
   '#f7f9fb': 'colorInfoBg',
   '#e6f7ff': 'colorInfoBgHover',
   '#f3f9ff': 'colorInfoBgHover',
@@ -57,6 +58,7 @@ const TOKEN_MAP = {
   '#f0f2f5': 'colorBgLayout',
   '#fafafa': 'colorBgLayout',
   '#f7f8fc': 'colorBgLayout',
+  '#f3f6fc': 'colorBgLayout',
   'rgb(250,250,250)': 'colorBgLayout',
   '#ffffff': 'colorBgContainer',
   '#fff': 'colorBgContainer',
@@ -158,9 +160,46 @@ function tokenParse(value) {
   };
 }
 
+// 基于属性名和数值的 token 映射
+const PROPERTY_TOKEN_MAP = {
+  fontSize: {
+    11: 'fontSizeSM',
+    12: 'fontSizeSM',
+    13: 'fontSize',
+    14: 'fontSize',
+    15: 'fontSizeLG',
+    16: 'fontSizeLG',
+  },
+};
+
+function propertyTokenParse(propertyName, value) {
+  // 基于属性名和数值的 token 解析
+  const propertyMap = PROPERTY_TOKEN_MAP[propertyName];
+  if (!propertyMap) {
+    return null;
+  }
+
+  const stringValue = String(value);
+  // 提取数值部分（去掉单位）
+  const numericValue = stringValue.replace(/[^\d.]/g, '');
+  const token = propertyMap[numericValue];
+  if (!token) {
+    return null;
+  }
+
+  return {
+    key: stringValue,
+    token,
+    formattedValue: stringValue,
+    propertyName,
+  };
+}
+
 module.exports = {
   TOKEN_MAP,
   TOKEN_MAP_KEYS,
   tokenParse,
+  PROPERTY_TOKEN_MAP,
+  propertyTokenParse,
   isLower,
 };