@oceanbase/codemod 0.4.16 → 1.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +19 -8
  2. package/bin/upgrade-list.json +8 -5
  3. package/package.json +3 -3
  4. package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less +2 -0
  5. package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less +2 -0
  6. package/transforms/__testfixtures__/less-to-token/case-insensitive.input.less +2 -0
  7. package/transforms/__testfixtures__/less-to-token/case-insensitive.output.less +2 -0
  8. package/transforms/__testfixtures__/less-to-token/mixin.input.less +3 -0
  9. package/transforms/__testfixtures__/less-to-token/mixin.output.less +3 -0
  10. package/transforms/__testfixtures__/less-to-token/obui-less-to-token.input.less +2 -0
  11. package/transforms/__testfixtures__/less-to-token/obui-less-to-token.output.less +2 -0
  12. package/transforms/__testfixtures__/less-to-token/obui-less-token-to-token.input.less +1 -0
  13. package/transforms/__testfixtures__/less-to-token/obui-less-token-to-token.output.less +1 -0
  14. package/transforms/__testfixtures__/style-to-token/anonymous-function.input.js +13 -0
  15. package/transforms/__testfixtures__/style-to-token/anonymous-function.output.js +14 -0
  16. package/transforms/__testfixtures__/style-to-token/antd-style.input.js +3 -0
  17. package/transforms/__testfixtures__/style-to-token/antd-style.output.js +3 -0
  18. package/transforms/__testfixtures__/style-to-token/block-statement.input.js +4 -0
  19. package/transforms/__testfixtures__/style-to-token/block-statement.output.js +4 -0
  20. package/transforms/__testfixtures__/style-to-token/class-component.input.js +2 -2
  21. package/transforms/__testfixtures__/style-to-token/class-component.output.js +2 -2
  22. package/transforms/__testfixtures__/style-to-token/existed-useToken.input.js +2 -2
  23. package/transforms/__testfixtures__/style-to-token/existed-useToken.output.js +2 -2
  24. package/transforms/__testfixtures__/style-to-token/function-component.input.js +4 -4
  25. package/transforms/__testfixtures__/style-to-token/function-component.output.js +4 -4
  26. package/transforms/__testfixtures__/style-to-token/function.input.js +6 -6
  27. package/transforms/__testfixtures__/style-to-token/function.output.js +7 -7
  28. package/transforms/__testfixtures__/style-to-token/hooks.input.js +4 -4
  29. package/transforms/__testfixtures__/style-to-token/hooks.output.js +4 -4
  30. package/transforms/__testfixtures__/style-to-token/nested-block-statement.input.js +3 -3
  31. package/transforms/__testfixtures__/style-to-token/nested-block-statement.output.js +3 -3
  32. package/transforms/__testfixtures__/style-to-token/single-function.input.js +5 -0
  33. package/transforms/__testfixtures__/style-to-token/single-function.output.js +7 -0
  34. package/transforms/__testfixtures__/style-to-token/top-identifier.input.js +1 -0
  35. package/transforms/__testfixtures__/style-to-token/top-identifier.output.js +1 -0
  36. package/transforms/__tests__/style-to-token.test.ts +2 -0
  37. package/transforms/less-to-token.js +16 -6
  38. package/transforms/style-to-token.js +392 -121
  39. package/transforms/utils/index.js +8 -0
  40. package/transforms/utils/token.js +39 -0
package/README.md CHANGED
@@ -181,12 +181,12 @@ transform fixed style to antd v5 design token.
181
181
  + const { token } = theme.useToken();
182
182
  return (
183
183
  - <div>
184
- - <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' }} />
185
- - <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f' }}></Button>
184
+ - <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 }} />
185
+ - <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f', fontSize: 12 }}></Button>
186
186
  - </div>
187
187
  + <div>
188
- + <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
189
- + <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
188
+ + <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
189
+ + <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
190
190
  + </div>
191
191
  );
192
192
  };
@@ -210,13 +210,13 @@ export default Demo;
210
210
  render() {
211
211
  return (
212
212
  - <div>
213
- - <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' }} />
214
- - <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f' }}></Button>
213
+ - <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 }} />
214
+ - <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4d4f', fontSize: 12 }}></Button>
215
215
  - <div color="#fafafa" border="1px solid #fafafa" />
216
216
  - </div>
217
217
  + <div>
218
- + <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBgLayout}` }} />
219
- + <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
218
+ + <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBgLayout}`, fontSize: token.fontSize }} />
219
+ + <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
220
220
  + <div color={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
221
221
  + </div>
222
222
  );
@@ -240,11 +240,13 @@ export default Demo;
240
240
  - warning: '#faad14',
241
241
  - error: '#ff4d4f',
242
242
  - border: '1px solid #d9d9d9',
243
+ - fontSize: 14,
243
244
  + info: token.colorInfo,
244
245
  + success: token.colorSuccess,
245
246
  + warning: token.colorWarning,
246
247
  + error: token.colorError,
247
248
  + border: `1px solid ${token.colorBorder}`,
249
+ + fontSize: token.fontSize,
248
250
  };
249
251
 
250
252
  function getColorList() {
@@ -274,6 +276,11 @@ export default Demo;
274
276
  - color: '1px solid #d9d9d9',
275
277
  + color: `1px solid ${token.colorBorder}`,
276
278
  },
279
+ {
280
+ type: 'fontSize',
281
+ - fontSize: 14,
282
+ + fontSize: token.fontSize,
283
+ }
277
284
  ];
278
285
  }
279
286
  ```
@@ -289,19 +296,23 @@ transform fixed less style to antd v5 design token.
289
296
  - background: #52c41a;
290
297
  - background-color: #faad14;
291
298
  - border-color: #ff4d4f;
299
+ - font-size: 14px;
292
300
  + color: @colorInfo;
293
301
  + background: @colorSuccess;
294
302
  + background-color: @colorWarning;
295
303
  + border-color: @colorError;
304
+ + font-size: @fontSize;
296
305
  .content {
297
306
  - color: rgba(0, 0, 0, 0.85);
298
307
  - background: rgba(0, 0, 0,0.65);
299
308
  - background-color: rgba(0,0,0,0.45);
300
309
  - border: 1px solid #d9d9d9;
310
+ - font-size: 12px;
301
311
  + color: @colorText;
302
312
  + background: @colorTextSecondary;
303
313
  + background-color: @colorTextTertiary;
304
314
  + border: 1px solid @colorBorder;
315
+ + font-size: @fontSizeSM;
305
316
  }
306
317
  }
307
318
  ```
package/bin/upgrade-list.json CHANGED
@@ -1,18 +1,21 @@
1
1
  {
2
2
  "@oceanbase/design": {
3
- "version": "^0.4.0"
3
+ "version": "^1.0.0-alpha.0"
4
4
  },
5
5
  "@oceanbase/icons": {
6
- "version": "^0.4.0"
6
+ "version": "^1.0.0-alpha.0"
7
7
  },
8
8
  "@oceanbase/ui": {
9
- "version": "^0.4.0"
9
+ "version": "^1.0.0-alpha.0"
10
10
  },
11
11
  "@oceanbase/charts": {
12
- "version": "^0.4.0"
12
+ "version": "^1.0.0-alpha.0"
13
13
  },
14
14
  "@oceanbase/util": {
15
- "version": "^0.4.0"
15
+ "version": "^1.0.0-alpha.0"
16
+ },
17
+ "@oceanbase/codemod": {
18
+ "version": "^1.0.0-alpha.0"
16
19
  },
17
20
  "react": {
18
21
  "version": "^16.9.0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oceanbase/codemod",
3
- "version": "0.4.16",
3
+ "version": "1.0.0-alpha.1",
4
4
  "description": "Codemod for OceanBase Design upgrade",
5
5
  "keywords": [
6
6
  "oceanbase",
@@ -23,7 +23,7 @@
23
23
  "build": "father build"
24
24
  },
25
25
  "dependencies": {
26
- "@oceanbase/design": "^0.4.16",
26
+ "@oceanbase/design": "^1.0.0-alpha.1",
27
27
  "chalk": "^3.0.0",
28
28
  "command-exists": "^1.2.9",
29
29
  "execa": "^5.1.1",
@@ -47,5 +47,5 @@
47
47
  "enzyme": "^3.11.0",
48
48
  "enzyme-to-json": "^3.6.2"
49
49
  },
50
- "gitHead": "42879f277f4c72e7254f121861f9e8b8a8e024ce"
50
+ "gitHead": "47b1ebfa75581585b83252085dddd33fc2c072a5"
51
51
  }
package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less CHANGED
@@ -4,10 +4,12 @@
4
4
  background-color: #faad14;
5
5
  border-color: #ff4d4f;
6
6
  scrollbar-color: #ffffff;
7
+ font-size: 14px;
7
8
  .content {
8
9
  color: rgba(0, 0, 0, 0.85);
9
10
  background: rgba(0, 0, 0,0.65);
10
11
  background-color: rgba(0,0,0,0.45);
11
12
  border: 1px solid #d9d9d9;
13
+ font-size: 12px;
12
14
  }
13
15
  }
package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less CHANGED
@@ -5,10 +5,12 @@
5
5
  background-color: @colorWarning;
6
6
  border-color: @colorError;
7
7
  scrollbar-color: @colorBgContainer;
8
+ font-size: @fontSize;
8
9
  .content {
9
10
  color: @colorText;
10
11
  background: @colorTextSecondary;
11
12
  background-color: @colorTextTertiary;
12
13
  border: 1px solid @colorBorder;
14
+ font-size: @fontSizeSM;
13
15
  }
14
16
  }
package/transforms/__testfixtures__/less-to-token/case-insensitive.input.less CHANGED
@@ -4,10 +4,12 @@
4
4
  background-color: #FAAD14;
5
5
  border-color: #FF4D4F;
6
6
  scrollbar-color: #FFFFFF;
7
+ font-size: 14px;
7
8
  .content {
8
9
  color: rgba(0, 0, 0, 0.85);
9
10
  background: rgba(0, 0, 0,0.65);
10
11
  background-color: rgba(0,0,0,0.45);
11
12
  border: 1px solid #D9D9D9;
13
+ font-size: 12px;
12
14
  }
13
15
  }
package/transforms/__testfixtures__/less-to-token/case-insensitive.output.less CHANGED
@@ -5,10 +5,12 @@
5
5
  background-color: @colorWarning;
6
6
  border-color: @colorError;
7
7
  scrollbar-color: @colorBgContainer;
8
+ font-size: @fontSize;
8
9
  .content {
9
10
  color: @colorText;
10
11
  background: @colorTextSecondary;
11
12
  background-color: @colorTextTertiary;
12
13
  border: 1px solid @colorBorder;
14
+ font-size: @fontSizeSM;
13
15
  }
14
16
  }
package/transforms/__testfixtures__/less-to-token/mixin.input.less CHANGED
@@ -4,6 +4,7 @@
4
4
  background-color: #faad14;
5
5
  border-color: #ff4d4f;
6
6
  scrollbar-color: #ffffff;
7
+ font-size: 14px;
7
8
  }
8
9
 
9
10
  .mixin-2 {
@@ -12,6 +13,7 @@
12
13
  background-color: #faad14;
13
14
  border-color: #ff4d4f;
14
15
  scrollbar-color: #ffffff;
16
+ font-size: 14px;
15
17
  }
16
18
 
17
19
  .container {
@@ -22,5 +24,6 @@
22
24
  background: rgba(0, 0, 0,0.65);
23
25
  background-color: rgba(0,0,0,0.45);
24
26
  border: 1px solid #d9d9d9;
27
+ font-size: 12px;
25
28
  }
26
29
  }
package/transforms/__testfixtures__/less-to-token/mixin.output.less CHANGED
@@ -6,6 +6,7 @@
6
6
  background-color: @colorWarning;
7
7
  border-color: @colorError;
8
8
  scrollbar-color: @colorBgContainer;
9
+ font-size: @fontSize;
9
10
  }
10
11
 
11
12
  .mixin-2 {
@@ -14,6 +15,7 @@
14
15
  background-color: @colorWarning;
15
16
  border-color: @colorError;
16
17
  scrollbar-color: @colorBgContainer;
18
+ font-size: @fontSize;
17
19
  }
18
20
 
19
21
  .container {
@@ -24,5 +26,6 @@
24
26
  background: @colorTextSecondary;
25
27
  background-color: @colorTextTertiary;
26
28
  border: 1px solid @colorBorder;
29
+ font-size: @fontSizeSM;
27
30
  }
28
31
  }
package/transforms/__testfixtures__/less-to-token/obui-less-to-token.input.less CHANGED
@@ -5,11 +5,13 @@
5
5
  background: @colorSuccess;
6
6
  background-color: @colorWarning;
7
7
  border-color: @colorError;
8
+ font-size: 14px;
8
9
  .content {
9
10
  color: rgba(0, 0, 0, 0.85);
10
11
  background: rgba(0, 0, 0,0.65);
11
12
  background-color: rgba(0,0,0,0.45);
12
13
  border-color: rgb(0 0 0 / 45%);
13
14
  border: 1px solid #d9d9d9;
15
+ font-size: 12px;
14
16
  }
15
17
  }
package/transforms/__testfixtures__/less-to-token/obui-less-to-token.output.less CHANGED
@@ -4,11 +4,13 @@
4
4
  background: @colorSuccess;
5
5
  background-color: @colorWarning;
6
6
  border-color: @colorError;
7
+ font-size: @fontSize;
7
8
  .content {
8
9
  color: @colorText;
9
10
  background: @colorTextSecondary;
10
11
  background-color: @colorTextTertiary;
11
12
  border-color: @colorTextTertiary;
12
13
  border: 1px solid @colorBorder;
14
+ font-size: @fontSizeSM;
13
15
  }
14
16
  }
package/transforms/__testfixtures__/less-to-token/obui-less-token-to-token.input.less CHANGED
@@ -5,4 +5,5 @@
5
5
  background: @colorSuccess;
6
6
  background-color: @colorWarning;
7
7
  border-color: @colorError;
8
+ font-size: 14px;
8
9
  }
package/transforms/__testfixtures__/less-to-token/obui-less-token-to-token.output.less CHANGED
@@ -4,4 +4,5 @@
4
4
  background: @colorSuccess;
5
5
  background-color: @colorWarning;
6
6
  border-color: @colorError;
7
+ font-size: @fontSize;
7
8
  }
package/transforms/__testfixtures__/style-to-token/anonymous-function.input.js ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { Alert, Button, Tooltip } from '@oceanbase/design';
3
+
4
+ export default function () {
5
+ const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
6
+ return (
7
+ <div>
8
+ <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 }} />
9
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
10
+ <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
11
+ </div>
12
+ );
13
+ };
package/transforms/__testfixtures__/style-to-token/anonymous-function.output.js ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
3
+
4
+ export default function () {
5
+ const { token } = theme.useToken();
6
+ const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
7
+ return (
8
+ <div>
9
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
10
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
11
+ <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
12
+ </div>
13
+ );
14
+ };
package/transforms/__testfixtures__/style-to-token/antd-style.input.js CHANGED
@@ -4,6 +4,7 @@ const useStyle1 = createStyles(() => {
4
4
  return {
5
5
  main: {
6
6
  background: '#1890ff',
7
+ fontSize: 14,
7
8
  },
8
9
  };
9
10
  });
@@ -12,6 +13,7 @@ const useStyle2 = createStyles(({}) => {
12
13
  return {
13
14
  main: {
14
15
  background: '#1890ff',
16
+ fontSize: '14px',
15
17
  },
16
18
  };
17
19
  });
@@ -20,6 +22,7 @@ const useStyle3 = createStyles(({ token }) => {
20
22
  return {
21
23
  main: {
22
24
  background: '#1890ff',
25
+ fontSize: 12,
23
26
  },
24
27
  };
25
28
  });
package/transforms/__testfixtures__/style-to-token/antd-style.output.js CHANGED
@@ -8,6 +8,7 @@ const useStyle1 = createStyles((
8
8
  return {
9
9
  main: {
10
10
  background: token.colorInfo,
11
+ fontSize: token.fontSize,
11
12
  },
12
13
  };
13
14
  });
@@ -18,6 +19,7 @@ const useStyle2 = createStyles(({
18
19
  return {
19
20
  main: {
20
21
  background: token.colorInfo,
22
+ fontSize: token.fontSize,
21
23
  },
22
24
  };
23
25
  });
@@ -26,6 +28,7 @@ const useStyle3 = createStyles(({ token }) => {
26
28
  return {
27
29
  main: {
28
30
  background: token.colorInfo,
31
+ fontSize: token.fontSizeSM,
29
32
  },
30
33
  };
31
34
  });
package/transforms/__testfixtures__/style-to-token/block-statement.input.js CHANGED
@@ -20,5 +20,9 @@ function getColorList() {
20
20
  type: 'border',
21
21
  color: '1px solid #d9d9d9',
22
22
  },
23
+ {
24
+ type: 'fontSize',
25
+ fontSize: 14,
26
+ },
23
27
  ];
24
28
  }
package/transforms/__testfixtures__/style-to-token/block-statement.output.js CHANGED
@@ -21,5 +21,9 @@ function getColorList() {
21
21
  type: 'border',
22
22
  color: `1px solid ${token.colorBorder}`,
23
23
  },
24
+ {
25
+ type: 'fontSize',
26
+ fontSize: token.fontSize,
27
+ },
24
28
  ];
25
29
  }
package/transforms/__testfixtures__/style-to-token/class-component.input.js CHANGED
@@ -10,8 +10,8 @@ class Demo extends React.PureComponent {
10
10
  render() {
11
11
  return (
12
12
  <div>
13
- <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' }} />
14
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
13
+ <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 }} />
14
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
15
15
  </div>
16
16
  );
17
17
  }
package/transforms/__testfixtures__/style-to-token/class-component.output.js CHANGED
@@ -10,8 +10,8 @@ class Demo extends React.PureComponent {
10
10
  render() {
11
11
  return (
12
12
  <div>
13
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
14
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
13
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
14
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
15
15
  </div>
16
16
  );
17
17
  }
package/transforms/__testfixtures__/style-to-token/existed-useToken.input.js CHANGED
@@ -5,8 +5,8 @@ const Demo = () => {
5
5
  const { token } = theme.useToken();
6
6
  return (
7
7
  <div>
8
- <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' }} />
9
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
8
+ <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 }} />
9
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
10
10
  <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
11
11
  </div>
12
12
  );
package/transforms/__testfixtures__/style-to-token/existed-useToken.output.js CHANGED
@@ -5,8 +5,8 @@ const Demo = () => {
5
5
  const { token } = theme.useToken();
6
6
  return (
7
7
  <div>
8
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
9
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
8
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
9
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
10
10
  <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
11
11
  </div>
12
12
  );
package/transforms/__testfixtures__/style-to-token/function-component.input.js CHANGED
@@ -5,8 +5,8 @@ function Demo1() {
5
5
  const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
6
6
  return (
7
7
  <div>
8
- <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' }} />
9
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
8
+ <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 }} />
9
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
10
10
  <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
11
11
  </div>
12
12
  );
@@ -16,8 +16,8 @@ const Demo2 = () => {
16
16
  const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
17
17
  return (
18
18
  <div>
19
- <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' }} />
20
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
19
+ <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 }} />
20
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
21
21
  <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
22
22
  </div>
23
23
  );
package/transforms/__testfixtures__/style-to-token/function-component.output.js CHANGED
@@ -6,8 +6,8 @@ function Demo1() {
6
6
  const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
7
7
  return (
8
8
  <div>
9
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
10
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
9
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
10
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
11
11
  <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
12
12
  </div>
13
13
  );
@@ -18,8 +18,8 @@ const Demo2 = () => {
18
18
  const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
19
19
  return (
20
20
  <div>
21
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
22
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
21
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
22
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
23
23
  <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
24
24
  </div>
25
25
  );
package/transforms/__testfixtures__/style-to-token/function.input.js CHANGED
@@ -5,8 +5,8 @@ function getComponent1() {
5
5
  const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
6
6
  return (
7
7
  <div>
8
- <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' }} />
9
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
8
+ <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 }} />
9
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
10
10
  <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
11
11
  </div>
12
12
  );
@@ -16,8 +16,8 @@ const getComponent2 = () => {
16
16
  const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
17
17
  return (
18
18
  <div>
19
- <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' }} />
20
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
19
+ <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 }} />
20
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
21
21
  <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
22
22
  </div>
23
23
  );
@@ -27,8 +27,8 @@ export default () => {
27
27
  const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
28
28
  return (
29
29
  <div>
30
- <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' }} />
31
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
30
+ <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 }} />
31
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
32
32
  <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
33
33
  </div>
34
34
  );
package/transforms/__testfixtures__/style-to-token/function.output.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
- import { Alert, Button, token, Tooltip } from '@oceanbase/design';
2
+ import { Alert, Button, Tooltip, token } from '@oceanbase/design';
3
3
 
4
4
  function getComponent1() {
5
5
  const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
6
6
  return (
7
7
  <div>
8
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
9
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
8
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
9
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
10
10
  <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
11
11
  </div>
12
12
  );
@@ -16,8 +16,8 @@ const getComponent2 = () => {
16
16
  const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
17
17
  return (
18
18
  <div>
19
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
20
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
19
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
20
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
21
21
  <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
22
22
  </div>
23
23
  );
@@ -27,8 +27,8 @@ export default () => {
27
27
  const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
28
28
  return (
29
29
  <div>
30
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
31
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
30
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
31
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
32
32
  <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
33
33
  </div>
34
34
  );
package/transforms/__testfixtures__/style-to-token/hooks.input.js CHANGED
@@ -5,8 +5,8 @@ function useComponent1 () {
5
5
  const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
6
6
  return (
7
7
  <div>
8
- <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' }} />
9
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
8
+ <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 }} />
9
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
10
10
  <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
11
11
  </div>
12
12
  );
@@ -16,8 +16,8 @@ const useComponent2 = () => {
16
16
  const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
17
17
  return (
18
18
  <div>
19
- <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' }} />
20
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
19
+ <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 }} />
20
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
21
21
  <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
22
22
  </div>
23
23
  );
package/transforms/__testfixtures__/style-to-token/hooks.output.js CHANGED
@@ -6,8 +6,8 @@ function useComponent1 () {
6
6
  const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
7
7
  return (
8
8
  <div>
9
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
10
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
9
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
10
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
11
11
  <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
12
12
  </div>
13
13
  );
@@ -18,8 +18,8 @@ const useComponent2 = () => {
18
18
  const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
19
19
  return (
20
20
  <div>
21
- <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
22
- <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
21
+ <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
22
+ <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
23
23
  <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
24
24
  </div>
25
25
  );
package/transforms/__testfixtures__/style-to-token/nested-block-statement.input.js CHANGED
@@ -4,13 +4,13 @@ import { Alert, Button, Tooltip } from '@oceanbase/design';
4
4
  const Demo = () => {
5
5
  const columns = [{
6
6
  render: () => {
7
- return <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />;
7
+ return <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" style={{ fontSize: 14 }} />;
8
8
  },
9
9
  }];
10
10
  return (
11
11
  <div>
12
- <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' }} />
13
- <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
12
+ <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 }} />
13
+ <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
14
14
  </div>
15
15
  );
16
16
  };