Merge pull request #519 from oceanbase/dengfuping-feature-design

[Feature Branch] feat(codemod): Add more color map to token for style-to-token and less-to-token transformer
oceanbase · Mar 22, 2024 · a989cbe · a989cbe
2 parents 3cf4018 + e212aff
commit a989cbe
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',