@oceanbase/codemod 0.2.7 → 0.2.8

package/README.md

@@ -14,7 +14,10 @@ Before run codemod scripts, you'd better make sure to commit your local git chan
 
 ```shell
 # Run directly through npx
+# `src` is the target directory or file that you want to transform.
 npx -p @oceanbase/codemod codemod src
+# options
+# --disablePrettier   // disable prettier
 ```
 
 ## Codemod scripts introduction
@@ -154,7 +157,7 @@ transform fixed style to antd v5 design token.
     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>
+-       <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f' }}></Button>
 -     </div>
 +     (<div>
 +       <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
@@ -183,11 +186,13 @@ export default Demo;
       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>
+-         <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f' }}></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>
++         <div color={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
 +       </div>)
       );
     }
@@ -200,11 +205,15 @@ export default Demo;
 
 ```diff
 + import { token } from '@oceanbase/design';
+- const color = '#fafafa';
+- const border = '1px solid #fafafa';
++ const color = token.colorBgLayout;
++ const border = `1px solid ${token.colorBgLayout}`;
   const colorMap = {
 -   info: '#1890ff',
 -   success: '#52c41a',
 -   warning: '#faad14',
--   error: '#ff4D4F',
+-   error: '#ff4d4f',
 -   border: '1px solid #d9d9d9',
 +   info: token.colorInfo,
 +   success: token.colorSuccess,
@@ -232,7 +241,7 @@ export default Demo;
       },
       {
         type: 'error',
--       color: '#ff4D4F',
+-       color: '#ff4d4f',
 +       color: token.colorError,
       },
       {
@@ -254,7 +263,7 @@ transform fixed less style to antd v5 design token.
 -   color: #1890ff;
 -   background: #52c41a;
 -   background-color: #faad14;
--   border-color: #ff4D4F;
+-   border-color: #ff4d4f;
 +   color: @colorInfo;
 +   background: @colorSuccess;
 +   background-color: @colorWarning;

package/bin/cli.js

@@ -91,7 +91,7 @@ function getRunnerArgs(transformerPath, parser = 'babylon', options = {}) {
     // override default babylon parser config to enable `decorator-legacy`
     // https://github.com/facebook/jscodeshift/blob/master/parser/babylon.js
     parserConfig: require('./babylon.config.json'),
-    extensions: ['js', 'jsx', 'ts', 'tsx', 'd.ts'].join(','),
+    extensions: ['js', 'jsx', 'ts', 'tsx'].join(','),
     transform: transformerPath,
     ignorePattern: '**/node_modules',
     ignoreConfig,
@@ -291,9 +291,9 @@ async function bootstrap() {
     console.log('[Prettier] format files running...');
     try {
       const isDir = isDirectory.sync(dir);
-      const path = isDir ? path.join(dir, '**/*.{js,jsx,ts,tsx,d.ts}') : dir;
+      const targetPath = isDir ? path.join(dir, '**/*.{js,jsx,ts,tsx}') : dir;
       const npxCommand = commandExistsSync('tnpx') ? 'tnpx' : 'npx';
-      await execa(npxCommand, ['prettier', '--write', path], { stdio: 'inherit' });
+      await execa(npxCommand, ['prettier', '--write', targetPath], { stdio: 'inherit' });
       console.log('\n[Prettier] format files completed!\n');
     } catch (err) {
       console.log('\n[Prettier] format files failed, please format it by yourself.\n', err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -26,7 +26,7 @@
     "chalk": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^5.1.1",
-    "find-up": "^4.1.0",
+    "find-up": "^6.3.0",
     "glob": "^10.3.10",
     "is-directory": "^0.3.1",
     "is-git-clean": "^1.1.0",
@@ -41,10 +41,10 @@
     "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.5",
+    "@types/jest": "^29.5.6",
     "@types/jscodeshift": "^0.11.7",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2"
   },
-  "gitHead": "641619d79cb7980279179b21905141950c604c54"
+  "gitHead": "98cd4d8a2af9b6e5dcde6210fc61f9efb74c7e01"
 }

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

@@ -2,7 +2,8 @@
   color: #1890ff;
   background: #52c41a;
   background-color: #faad14;
-  border-color: #ff4D4F;
+  border-color: #ff4d4f;
+  scrollbar-color: #ffffff;
   .content {
     color: rgba(0, 0, 0, 0.85);
     background: rgba(0, 0, 0,0.65);

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

@@ -4,6 +4,7 @@
   background: @colorSuccess;
   background-color: @colorWarning;
   border-color: @colorError;
+  scrollbar-color: @colorBgContainer;
   .content {
     color: @colorText;
     background: @colorTextSecondary;

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

@@ -0,0 +1,13 @@
+.container {
+  color: #1890FF;
+  background: #52C41A;
+  background-color: #FAAD14;
+  border-color: #FF4D4F;
+  scrollbar-color: #FFFFFF;
+  .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;
+  }
+}

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

@@ -0,0 +1,14 @@
+@import '~@oceanbase/design/es/theme/index.less';
+.container {
+  color: @colorInfo;
+  background: @colorSuccess;
+  background-color: @colorWarning;
+  border-color: @colorError;
+  scrollbar-color: @colorBgContainer;
+  .content {
+    color: @colorText;
+    background: @colorTextSecondary;
+    background-color: @colorTextTertiary;
+    border: 1px solid @colorBorder;
+  }
+}

package/transforms/__testfixtures__/style-to-token/{static.input.js → block-statement.input.js}

@@ -1,11 +1,3 @@
-const colorMap = {
-  info: '#1890ff',
-  success: '#52c41a',
-  warning: '#faad14',
-  error: '#ff4D4F',
-  border: '1px solid #d9d9d9',
-};
-
 function getColorList() {
   return [
     {

package/transforms/__testfixtures__/style-to-token/{static.output.js → block-statement.output.js}

@@ -1,12 +1,4 @@
 import { token } from '@oceanbase/design';
-const colorMap = {
-  info: token.colorInfo,
-  success: token.colorSuccess,
-  warning: token.colorWarning,
-  error: token.colorError,
-  border: `1px solid ${token.colorBorder}`,
-};
-
 function getColorList() {
   return [
     {

package/transforms/__testfixtures__/style-to-token/case-insensitive.input.js

@@ -0,0 +1,10 @@
+const color = '#FAFAFA';
+const border = '1px solid #FAFAFA';
+
+const colorMap = {
+  info: '#1890FF',
+  success: '#52C41A',
+  warning: '#FAAD14',
+  error: '#FF4D4F',
+  border: '1px solid #D9D9D9',
+};

package/transforms/__testfixtures__/style-to-token/case-insensitive.output.js

@@ -0,0 +1,11 @@
+import { token } from '@oceanbase/design';
+const color = token.colorBgLayout;
+const border = `1px solid ${token.colorBgLayout}`;
+
+const colorMap = {
+  info: token.colorInfo,
+  success: token.colorSuccess,
+  warning: token.colorWarning,
+  error: token.colorError,
+  border: `1px solid ${token.colorBorder}`,
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
+
+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>
+      <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
+    </div>
+  );
+};
+
+export default Demo;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
+
+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>
+      <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
+    </div>)
+  );
+};
+
+export default Demo;

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Alert, Button } from '@oceanbase/design';
+import { Alert, Button, Tooltip } from '@oceanbase/design';
 
 const Demo = () => {
   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>
+      <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Button, theme } from '@oceanbase/design';
+import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
 
 const Demo = () => {
   const { token } = theme.useToken();
@@ -7,6 +7,7 @@ const Demo = () => {
     (<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>
+      <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

@@ -0,0 +1,18 @@
+import React from 'react';
+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 (
+    <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>
+    </div>
+  );
+};
+
+export default Demo;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
+
+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 (
+    (<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>
+    </div>)
+  );
+};
+
+export default Demo;

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

@@ -0,0 +1,10 @@
+const color = '#fafafa';
+const border = '1px solid #fafafa';
+
+const colorMap = {
+  info: '#1890ff',
+  success: '#52c41a',
+  warning: '#faad14',
+  error: '#ff4d4f',
+  border: '1px solid #d9d9d9',
+};

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

@@ -0,0 +1,11 @@
+import { token } from '@oceanbase/design';
+const color = token.colorBgLayout;
+const border = `1px solid ${token.colorBgLayout}`;
+
+const colorMap = {
+  info: token.colorInfo,
+  success: token.colorSuccess,
+  warning: token.colorWarning,
+  error: token.colorError,
+  border: `1px solid ${token.colorBorder}`,
+};

package/transforms/__tests__/less-to-token.test.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import { transform } from '../less-to-token';
 
 const testUnit = 'less-to-token';
-const tests = ['antd-v4-less-to-token', 'obui-less-to-token'];
+const tests = ['antd-v4-less-to-token', 'obui-less-to-token', 'case-insensitive'];
 
 describe(testUnit, () => {
   tests.forEach(test => {

package/transforms/__tests__/style-to-token.test.ts

@@ -1,7 +1,15 @@
 import { defineTest } from 'jscodeshift/src/testUtils';
 
 const testUnit = 'style-to-token';
-const tests = ['function-component', 'class-component', 'static'];
+const tests = [
+  'function-component',
+  'class-component',
+  'block-statement',
+  'nested-block-statement',
+  'existed-useToken',
+  'top-identifier',
+  'case-insensitive',
+];
 
 describe(testUnit, () => {
   tests.forEach(test =>

package/transforms/__tests__/token.test.ts

@@ -0,0 +1,11 @@
+import { TOKEN_MAP_KEYS, isLower } from '../utils/token';
+
+describe('token', () => {
+  it('TOKEN_MAP_KEYS should be lower case', async () => {
+    expect(TOKEN_MAP_KEYS.every(key => isLower(key))).toEqual(true);
+  });
+
+  it('TOKEN_MAP_KEYS should not include blank space', async () => {
+    expect(TOKEN_MAP_KEYS.every(key => !key.includes(' '))).toEqual(true);
+  });
+});

package/transforms/less-to-token.js

@@ -18,7 +18,7 @@ const findAllLessFiles = dir => {
     files.forEach(file => {
       const filePath = path.join(dir, file);
       if (isDirectory.sync(filePath)) {
-        if (filePath.includes('.umi')) {
+        if (filePath.includes('.umi') || filePath.includes('.umi-production')) {
           return;
         }
         lessFiles.push(...findAllLessFiles(filePath));
@@ -26,7 +26,7 @@ const findAllLessFiles = dir => {
         lessFiles.push(filePath);
       }
     });
-  } else {
+  } else if (dir.endsWith('.less')) {
     lessFiles.push(dir);
   }
   return lessFiles;
@@ -77,7 +77,7 @@ async function lessToToken(file) {
   const allLessFiles = findAllLessFiles(file);
   for await (const item of allLessFiles) {
     const content = await transform(item);
-    fs.writeFileSync(file, content);
+    fs.writeFileSync(item, content);
   }
 }
 

package/transforms/style-to-token.js

@@ -2,6 +2,35 @@ const { addSubmoduleImport } = require('./utils');
 const { tokenParse } = require('./utils/token');
 const { printOptions } = require('./utils/config');
 
+function isTopBlockStatement(path) {
+  const isBlockStatement = path.value.type === 'BlockStatement';
+  let isTop = isBlockStatement && true;
+  path = path.parentPath;
+  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
+    if (path.value.type === 'BlockStatement') {
+      isTop = false;
+      break;
+    }
+    path = path.parentPath;
+  }
+  return isTop;
+}
+
 function importComponent(j, root, options) {
   let hasChanged = false;
 
@@ -16,51 +45,70 @@ function importComponent(j, root, options) {
     stringList.replaceWith(path => {
       hasChanged = true;
       const { key, token, formattedValue } = tokenParse(path.value.value);
-      return formattedValue === key
-        ? j.identifier(`token.${token}`)
-        : j.templateLiteral(
-            [
-              j.templateElement(
-                {
-                  raw: formattedValue.replace(key, `\${token.${token}}`),
-                  cooked: formattedValue.replace(key, `\${token.${token}}`),
-                },
-                true
-              ),
-            ],
-            []
-          );
+      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}}`;
+      }
+      return formattedValue === key ? j.identifier(stringValue) : j.identifier(templateStringValue);
     });
 
-    root.find(j.BlockStatement).forEach(path => {
-      const includeToken =
-        j(path).find(j.Identifier, {
-          name: name => name?.includes('token.'),
-        }).length > 0;
-      if (includeToken) {
-        const includeJsxElementList = j(path).find(j.JSXElement).length > 0;
-        const parentType = path.parentPath.value?.type;
-        // React function component
-        if (includeJsxElementList && parentType !== 'ClassMethod') {
-          const importString = `const { token } = theme.useToken()`;
-          path.get('body').value.unshift(j.expressionStatement(j.identifier(importString)));
-          // import theme from @oceanbase/design
-          addSubmoduleImport(j, root, {
-            moduleName: '@oceanbase/design',
-            importedName: 'theme',
-            importKind: 'value',
-          });
-        } 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',
-          });
+    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;
+          // React function component
+          if (includeJSXElement && parentType !== 'ClassMethod') {
+            // 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',
+              });
+            }
+          } 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',
+            });
+          }
         }
-      }
-    });
+      });
+
+    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;

package/transforms/utils/token.js

@@ -4,39 +4,84 @@ const TOKEN_MAP = {
   // antd style => token
   '#1677ff': 'colorInfo',
   '#1890ff': 'colorInfo',
+  '#40a9ff': 'colorInfo',
+  '#f7f9fb': 'colorInfoBg',
+  '#e6f7ff': 'colorInfoBgHover',
+  '#f3f9ff': 'colorInfoBgHover',
+  '#e6f7ff': 'colorInfoBgHover',
   '#73d13d': 'colorSuccess',
   '#52c41a': 'colorSuccess',
   '#faad14': 'colorWarning',
+  '#fef6e7': 'colorWarningBg',
   '#ff4d4f': 'colorError',
-  '#F5222D': 'colorError',
-  '#F8636B': 'colorError',
+  '#f5222d': 'colorError',
+  '#f8636b': 'colorError',
   '#d9d9d9': 'colorBorder',
   '#bfbfbf': 'colorBorder',
+  '#e8e8e8': 'colorBorder',
+  '#f0f0f0': 'colorBorder',
+  '#dadada': 'colorBorder',
+  'rgba(217,217,217,1)': 'colorBorder',
+  'rgba(217,217,217,1.0)': 'colorBorder',
+  'rgba(217,217,217)': 'colorBorder',
   '#f0f2f5': 'colorBgLayout',
   '#fafafa': 'colorBgLayout',
-  '#fff': 'colorBgContainer',
+  '#f7f8fc': 'colorBgLayout',
   '#ffffff': 'colorBgContainer',
+  '#fff': 'colorBgContainer',
   'rgba(0,0,0,0.85)': 'colorText',
   'rgba(0,0,0,0.65)': 'colorTextSecondary',
   'rgba(0,0,0,0.45)': 'colorTextTertiary',
+  '#5c6b8a': 'colorTextTertiary',
   'rgba(0,0,0,0.25)': 'colorTextQuaternary',
+  'rgba(0,0,0,.85)': 'colorText',
+  'rgba(0,0,0,.65)': 'colorTextSecondary',
+  'rgba(0,0,0,.45)': 'colorTextTertiary',
+  'rgba(0,0,0,.25)': 'colorTextQuaternary',
   'rgba(0,0,0,0.2)': 'colorFillQuaternary',
+  '#00000073': 'colorTextDescription',
+  '#f5f5f5': 'colorFillQuaternary',
+  'rgba(0,0,0,0.02)': 'colorBgLayout',
   'rgba(0,0,0,0.04)': 'colorBgLayout',
+  '#f5f6fa': 'colorBgLayout',
+  '#edeff2': 'colorBgLayout',
   // obui style => token
   '#006aff': 'colorInfo',
+  '#086fff': 'colorInfo',
+  'rgba(24,144,255,0.1)': 'colorInfoBg',
+  'rgba(95,149,255,0.10)': 'colorInfoBg',
+  'rgba(95,149,255,0.1)': 'colorInfoBg',
+  'rgba(95,149,255,1)': 'colorInfoBorder',
   '#0ac185': 'colorSuccess',
+  '#4dcca2': 'colorSuccess',
+  'rgba(10,193,133,1)': 'colorSuccess',
+  'rgba(82,196,26,0.1)': 'colorSuccessBg',
   '#ffac33': 'colorWarning',
+  '#ff9700': 'colorWarning',
+  '#fbba3a': 'colorWarning',
+  'rgb(243,164,60)': 'colorWarning',
+  'rgba(250,140,22,0.1)': 'colorWarningBg',
   '#ff4b4b': 'colorError',
-  '#CDD5E4': 'colorBorder',
-  '#F5F8FE': 'colorBgLayout',
+  '#ff1a1a': 'colorError',
+  '#fff1f0': 'colorErrorBg',
+  'rgba(245,34,45,0.1)': 'colorErrorBg',
+  '#ffa39e': 'colorErrorBorder',
+  '#cdd5e4': 'colorBorder',
+  '#f5f8fe': 'colorBgLayout',
+  '#f5f7fa': 'colorBgLayout',
+  'rgba(140,140,140,0.1)': 'colorBgLayout',
   '#132039': 'colorText',
   '#364563': 'colorTextSecondary',
-  '#8592AD': 'colorTextTertiary',
-  '#F8FAFE': 'colorFillQuaternary',
+  '#8592ad': 'colorTextTertiary',
+  '#f8fafe': 'colorFillQuaternary',
 };
 
 const TOKEN_MAP_KEYS = Object.keys(TOKEN_MAP);
 
+function isLower(str) {
+  return toLower(str) === str;
+}
+
 function customTrim(str) {
   return str?.replace(/(\s)*([,\(\)])(\s)*/g, '$2');
 }
@@ -47,7 +92,13 @@ function formatValue(value) {
 
 function tokenParse(value) {
   const formattedValue = formatValue(value);
-  const key = TOKEN_MAP_KEYS.find(item => formattedValue.includes(item));
+  const key = TOKEN_MAP_KEYS.find(
+    item =>
+      formattedValue.endsWith(item) ||
+      formattedValue.includes(`${item} `) ||
+      formattedValue.includes(`${item}, `) ||
+      formattedValue.includes(`${item},`)
+  );
   return {
     key,
     token: TOKEN_MAP[key],
@@ -59,4 +110,5 @@ module.exports = {
   TOKEN_MAP,
   TOKEN_MAP_KEYS,
   tokenParse,
+  isLower,
 };