From e212aff44496778b7da7c0963426901050b634c7 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Fri, 22 Mar 2024 09:55:16 +0800
Subject: [PATCH] feat(codemod): Add more color map to token for style-to-token
 and less-to-token transformer

---
 .../less-to-token/obui-less-to-token.input.less              | 1 +
 .../less-to-token/obui-less-to-token.output.less             | 1 +
 .../style-to-token/function-component.input.js               | 1 +
 .../style-to-token/function-component.output.js              | 1 +
 packages/codemod/transforms/__tests__/token.test.ts          | 4 ++--
 packages/codemod/transforms/utils/token.js                   | 5 +++++
 6 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/codemod/transforms/__testfixtures__/less-to-token/obui-less-to-token.input.less b/packages/codemod/transforms/__testfixtures__/less-to-token/obui-less-to-token.input.less
index ed6154ea1..efae1404e 100644
--- a/packages/codemod/transforms/__testfixtures__/less-to-token/obui-less-to-token.input.less
+++ b/packages/codemod/transforms/__testfixtures__/less-to-token/obui-less-to-token.input.less
@@ -9,6 +9,7 @@
     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;
   }
 }
diff --git a/packages/codemod/transforms/__testfixtures__/less-to-token/obui-less-to-token.output.less b/packages/codemod/transforms/__testfixtures__/less-to-token/obui-less-to-token.output.less
index 4f25e105d..d251a182c 100644
--- a/packages/codemod/transforms/__testfixtures__/less-to-token/obui-less-to-token.output.less
+++ b/packages/codemod/transforms/__testfixtures__/less-to-token/obui-less-to-token.output.less
@@ -8,6 +8,7 @@
     color: @colorText;
     background: @colorTextSecondary;
     background-color: @colorTextTertiary;
+    border-color: @colorTextTertiary;
     border: 1px solid @colorBorder;
   }
 }
diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
index 20667df8f..6062812e1 100644
--- a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
+++ b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Alert, Button, Tooltip } from '@oceanbase/design';
 
 const Demo = () => {
+  const tokenList = ['rgb(0 0 0 / 45%)'];
   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' }} />
diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
index ca71b9162..ca8969939 100644
--- a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
+++ b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
@@ -3,6 +3,7 @@ import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
 
 const Demo = () => {
   const { token } = theme.useToken();
+  const tokenList = [token.colorTextTertiary];
   return (
     (<div>
       <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
diff --git a/packages/codemod/transforms/__tests__/token.test.ts b/packages/codemod/transforms/__tests__/token.test.ts
index c4e86e78b..831609e0f 100644
--- a/packages/codemod/transforms/__tests__/token.test.ts
+++ b/packages/codemod/transforms/__tests__/token.test.ts
@@ -5,7 +5,7 @@ describe('token', () => {
     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);
+  it('TOKEN_MAP_KEYS should not include `, `', async () => {
+    expect(TOKEN_MAP_KEYS.every(key => !key.includes(', '))).toEqual(true);
   });
 });
diff --git a/packages/codemod/transforms/utils/token.js b/packages/codemod/transforms/utils/token.js
index 5db27ee99..9d423569c 100644
--- a/packages/codemod/transforms/utils/token.js
+++ b/packages/codemod/transforms/utils/token.js
@@ -30,6 +30,7 @@ const TOKEN_MAP = {
   'rgb(250,250,250)': 'colorBgLayout',
   '#ffffff': 'colorBgContainer',
   '#fff': 'colorBgContainer',
+  'rgb(255 255 255 / 100%)': 'colorBgContainer',
   'rgba(0,0,0,0.85)': 'colorText',
   'rgba(0,0,0,0.65)': 'colorTextSecondary',
   'rgba(0,0,0,0.45)': 'colorTextTertiary',
@@ -40,6 +41,10 @@ const TOKEN_MAP = {
   'rgba(0,0,0,.45)': 'colorTextTertiary',
   'rgba(0,0,0,.25)': 'colorTextQuaternary',
   'rgba(0,0,0,0.2)': 'colorFillQuaternary',
+  'rgb(0 0 0 / 85%)': 'colorText',
+  'rgb(0 0 0 / 65%)': 'colorTextSecondary',
+  'rgb(0 0 0 / 45%)': 'colorTextTertiary',
+  'rgb(0 0 0 / 25%)': 'colorTextQuaternary',
   '#00000073': 'colorTextDescription',
   '#f5f5f5': 'colorFillQuaternary',
   'rgba(0,0,0,0.02)': 'colorBgLayout',