@oceanbase/codemod 1.0.0-alpha.7 → 1.0.0-alpha.9
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.
- package/README.md +85 -0
- package/bin/cli.js +39 -3
- package/package.json +4 -4
- package/transforms/__testfixtures__/less-to-cssvar/basic.input.less +16 -0
- package/transforms/__testfixtures__/less-to-cssvar/basic.output.less +14 -0
- package/transforms/__testfixtures__/less-to-cssvar/color-scales.input.less +23 -0
- package/transforms/__testfixtures__/less-to-cssvar/color-scales.output.less +21 -0
- package/transforms/__testfixtures__/less-to-cssvar/complex-values.input.less +22 -0
- package/transforms/__testfixtures__/less-to-cssvar/complex-values.output.less +20 -0
- package/transforms/__testfixtures__/less-to-cssvar/control-tokens.input.less +29 -0
- package/transforms/__testfixtures__/less-to-cssvar/control-tokens.output.less +27 -0
- package/transforms/__testfixtures__/less-to-cssvar/css-modules-global.input.less +21 -0
- package/transforms/__testfixtures__/less-to-cssvar/css-modules-global.output.less +19 -0
- package/transforms/__testfixtures__/less-to-cssvar/custom-prefix.input.less +9 -0
- package/transforms/__testfixtures__/less-to-cssvar/custom-prefix.output.less +7 -0
- package/transforms/__testfixtures__/less-to-cssvar/fill-tokens.input.less +36 -0
- package/transforms/__testfixtures__/less-to-cssvar/fill-tokens.output.less +34 -0
- package/transforms/__testfixtures__/less-to-cssvar/mixed-values.input.less +21 -0
- package/transforms/__testfixtures__/less-to-cssvar/mixed-values.output.less +19 -0
- package/transforms/__testfixtures__/less-to-cssvar/multiple-imports.input.less +9 -0
- package/transforms/__testfixtures__/less-to-cssvar/multiple-imports.output.less +8 -0
- package/transforms/__testfixtures__/less-to-cssvar/nested-selectors.input.less +24 -0
- package/transforms/__testfixtures__/less-to-cssvar/nested-selectors.output.less +22 -0
- package/transforms/__testfixtures__/less-to-cssvar/no-transform.input.less +8 -0
- package/transforms/__testfixtures__/less-to-cssvar/no-transform.output.less +8 -0
- package/transforms/__testfixtures__/less-to-cssvar/obui-import.input.less +7 -0
- package/transforms/__testfixtures__/less-to-cssvar/obui-import.output.less +5 -0
- package/transforms/__testfixtures__/less-to-cssvar/status-colors.input.less +25 -0
- package/transforms/__testfixtures__/less-to-cssvar/status-colors.output.less +23 -0
- package/transforms/__testfixtures__/less-to-token/case-insensitive.input.less +4 -0
- package/transforms/__testfixtures__/less-to-token/case-insensitive.output.less +4 -0
- package/transforms/__testfixtures__/style-to-token/function-component.input.js +2 -2
- package/transforms/__testfixtures__/style-to-token/function-component.output.js +2 -2
- package/transforms/__tests__/less-to-cssvar.test.ts +124 -0
- package/transforms/less-to-cssvar.js +482 -0
- package/transforms/utils/token.js +19 -0
package/README.md
CHANGED
|
@@ -316,3 +316,88 @@ transform fixed less style to antd v5 design token.
|
|
|
316
316
|
}
|
|
317
317
|
}
|
|
318
318
|
```
|
|
319
|
+
|
|
320
|
+
### `less-to-cssvar`
|
|
321
|
+
|
|
322
|
+
Transform Less variables to CSS variables. This transformer must be explicitly specified via `--transformer` option.
|
|
323
|
+
|
|
324
|
+
```shell
|
|
325
|
+
# Basic usage (auto-detect: CSS Module import → .module.css, global import → .css)
|
|
326
|
+
npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar
|
|
327
|
+
|
|
328
|
+
# With custom prefix (default: ant)
|
|
329
|
+
npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar --prefix=ob
|
|
330
|
+
|
|
331
|
+
# Never add .module suffix (skip auto-detection)
|
|
332
|
+
npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar --add-module=false
|
|
333
|
+
|
|
334
|
+
# Disable renaming .less to .css (keep .less extension)
|
|
335
|
+
npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar --rename-to-css=false
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
**Options:**
|
|
339
|
+
|
|
340
|
+
| Option | Description | Default |
|
|
341
|
+
| ----------------- | ---------------------------------------------------- | ------- |
|
|
342
|
+
| `--prefix` | CSS variable prefix, e.g. `var(--ant-color-primary)` | `ant` |
|
|
343
|
+
| `--rename-to-css` | Rename `.less` files to `.css` | `true` |
|
|
344
|
+
| `--add-module` | Add `.module` suffix when renaming | `true` |
|
|
345
|
+
|
|
346
|
+
**`--add-module` 说明：**
|
|
347
|
+
|
|
348
|
+
| 值 | 行为 |
|
|
349
|
+
| ------- | -------------------------------------------- |
|
|
350
|
+
| `true` | 自动检测：根据导入方式判断是否添加 `.module` |
|
|
351
|
+
| `false` | 跳过检测：统一不添加 `.module` |
|
|
352
|
+
|
|
353
|
+
**自动检测规则：**
|
|
354
|
+
|
|
355
|
+
| 导入方式 | 结果 |
|
|
356
|
+
| ---------------------------------------------- | ---------------- |
|
|
357
|
+
| `import styles from './xxx.less'` (CSS Module) | `xxx.module.css` |
|
|
358
|
+
| `import './xxx.less'` (全局样式) | `xxx.css` |
|
|
359
|
+
| `global.less` / `reset.less` 等常见全局文件名 | `xxx.css` |
|
|
360
|
+
|
|
361
|
+
**Important Notes:**
|
|
362
|
+
|
|
363
|
+
When `--rename-to-css` is enabled (default):
|
|
364
|
+
|
|
365
|
+
1. **Comment conversion**: Less single-line comments (`//`) will be automatically converted to CSS block comments (`/* */`).
|
|
366
|
+
2. **`:global` syntax**: CSS Modules `:global` syntax will continue to work in `.css` files.
|
|
367
|
+
3. **Import references**: Import references in JS/TS/JSX/TSX files will be **automatically updated**:
|
|
368
|
+
|
|
369
|
+
```diff
|
|
370
|
+
- import './style.less';
|
|
371
|
+
+ import './style.css';
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
**Example:**
|
|
375
|
+
|
|
376
|
+
```diff
|
|
377
|
+
- @import '~@oceanbase/design/es/theme/index.less';
|
|
378
|
+
.container {
|
|
379
|
+
- color: @colorPrimary;
|
|
380
|
+
- background: @colorBgContainer;
|
|
381
|
+
- border-color: @colorBorder;
|
|
382
|
+
- font-size: @fontSize;
|
|
383
|
+
+ color: var(--ant-color-primary);
|
|
384
|
+
+ background: var(--ant-color-bg-container);
|
|
385
|
+
+ border-color: var(--ant-color-border);
|
|
386
|
+
+ font-size: var(--ant-font-size);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.status {
|
|
390
|
+
&.success {
|
|
391
|
+
- color: @colorSuccess;
|
|
392
|
+
- background: @colorSuccessBg;
|
|
393
|
+
+ color: var(--ant-color-success);
|
|
394
|
+
+ background: var(--ant-color-success-bg);
|
|
395
|
+
}
|
|
396
|
+
&.error {
|
|
397
|
+
- color: @colorError;
|
|
398
|
+
- background: @colorErrorBg;
|
|
399
|
+
+ color: var(--ant-color-error);
|
|
400
|
+
+ background: var(--ant-color-error-bg);
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
```
|
package/bin/cli.js
CHANGED
|
@@ -18,6 +18,7 @@ const pkg = require('../package.json');
|
|
|
18
18
|
const pkgUpgradeList = require('./upgrade-list');
|
|
19
19
|
const { getDependencies } = require('../transforms/utils/marker');
|
|
20
20
|
const { lessToToken } = require('../transforms/less-to-token');
|
|
21
|
+
const { lessToCssvar } = require('../transforms/less-to-cssvar');
|
|
21
22
|
|
|
22
23
|
// jscodeshift codemod scripts dir
|
|
23
24
|
const transformersDir = path.join(__dirname, '../transforms');
|
|
@@ -35,6 +36,13 @@ const transformers = [
|
|
|
35
36
|
'less-to-token',
|
|
36
37
|
];
|
|
37
38
|
|
|
39
|
+
// Transformers that must be explicitly specified via --transformer option
|
|
40
|
+
// These are not run by default
|
|
41
|
+
const explicitTransformers = ['less-to-cssvar'];
|
|
42
|
+
|
|
43
|
+
// All available transformers
|
|
44
|
+
const allTransformers = [...transformers, ...explicitTransformers];
|
|
45
|
+
|
|
38
46
|
const dependencyProperties = [
|
|
39
47
|
'dependencies',
|
|
40
48
|
'devDependencies',
|
|
@@ -101,9 +109,11 @@ function getRunnerArgs(transformerPath, parser = 'babylon', options = {}) {
|
|
|
101
109
|
}
|
|
102
110
|
|
|
103
111
|
async function run(filePath, args = {}) {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
112
|
+
// When --transformer is specified, filter against all available transformers
|
|
113
|
+
// Otherwise, use default transformers only (excluding explicit-only ones like less-to-cssvar)
|
|
114
|
+
const targetTransformers = args.transformer
|
|
115
|
+
? args.transformer.split(',').filter(transformer => allTransformers.includes(transformer))
|
|
116
|
+
: transformers;
|
|
107
117
|
for (const transformer of targetTransformers) {
|
|
108
118
|
await transform(transformer, 'babylon', filePath, args);
|
|
109
119
|
}
|
|
@@ -120,6 +130,25 @@ async function transform(transformer, parser, filePath, options) {
|
|
|
120
130
|
try {
|
|
121
131
|
if (transformer === 'less-to-token') {
|
|
122
132
|
await lessToToken(filePath);
|
|
133
|
+
} else if (transformer === 'less-to-cssvar') {
|
|
134
|
+
// less-to-cssvar options:
|
|
135
|
+
// --prefix: CSS variable prefix (default: 'ant')
|
|
136
|
+
// --rename-to-css: Whether to rename .less to .css (default: true)
|
|
137
|
+
// --add-module: Whether to add .module suffix when renaming (default: true)
|
|
138
|
+
// - true (default): auto-detect based on import style (CSS Module vs global)
|
|
139
|
+
// - false: skip detection, never add .module
|
|
140
|
+
const addModuleValue = options['add-module'] ?? options.addModule;
|
|
141
|
+
// Default is true (auto-detect), false means skip detection
|
|
142
|
+
const addModuleOption = addModuleValue !== false && addModuleValue !== 'false';
|
|
143
|
+
|
|
144
|
+
const lessToCssvarOptions = {
|
|
145
|
+
prefix: options.prefix || 'ant',
|
|
146
|
+
// Support both --rename-to-css and --renameToCss formats
|
|
147
|
+
// Default is true, use --rename-to-css=false or --no-rename-to-css to disable
|
|
148
|
+
renameToCss: options['rename-to-css'] !== false && options.renameToCss !== false,
|
|
149
|
+
addModule: addModuleOption,
|
|
150
|
+
};
|
|
151
|
+
await lessToCssvar(filePath, lessToCssvarOptions);
|
|
123
152
|
} else {
|
|
124
153
|
if (process.env.NODE_ENV === 'local') {
|
|
125
154
|
console.log(`Running jscodeshift with: ${JSON.stringify(args)}`);
|
|
@@ -282,6 +311,13 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
|
|
|
282
311
|
* --disablePrettier // disable prettier
|
|
283
312
|
* --transformer=t1,t2 // specify target transformer
|
|
284
313
|
* --ignore-config // ignore config file
|
|
314
|
+
*
|
|
315
|
+
* less-to-cssvar specific options:
|
|
316
|
+
* --prefix=ant // CSS variable prefix (default: 'ant'), e.g. var(--ant-color-primary)
|
|
317
|
+
* --rename-to-css // rename .less files to .css (default: true), use --rename-to-css=false to disable
|
|
318
|
+
* --add-module // add .module suffix when renaming (default: true)
|
|
319
|
+
* // true: auto-detect based on import style (CSS Module vs global)
|
|
320
|
+
* // false: skip detection, never add .module
|
|
285
321
|
*/
|
|
286
322
|
|
|
287
323
|
async function bootstrap() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oceanbase/codemod",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.9",
|
|
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": "^1.0.0-alpha.
|
|
26
|
+
"@oceanbase/design": "^1.0.0-alpha.9",
|
|
27
27
|
"chalk": "^3.0.0",
|
|
28
28
|
"command-exists": "^1.2.9",
|
|
29
29
|
"execa": "^5.1.1",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"lodash": "^4.17.21",
|
|
36
36
|
"postcss": "^8.5.6",
|
|
37
37
|
"postcss-less": "^6.0.0",
|
|
38
|
-
"prettier": "^3.
|
|
38
|
+
"prettier": "^3.7.4",
|
|
39
39
|
"read-pkg-up": "^10.1.0",
|
|
40
40
|
"semver": "^7.7.3",
|
|
41
41
|
"update-check": "^1.5.4",
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"enzyme": "^3.11.0",
|
|
48
48
|
"enzyme-to-json": "^3.6.2"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "b208f8aa2f982a955a827e14b58796e934cac016"
|
|
51
51
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.container {
|
|
4
|
+
color: @colorPrimary;
|
|
5
|
+
background: @colorBgContainer;
|
|
6
|
+
border-color: @colorBorder;
|
|
7
|
+
font-size: @fontSize;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.content {
|
|
11
|
+
color: @colorText;
|
|
12
|
+
background-color: @colorBgLayout;
|
|
13
|
+
border-radius: @borderRadius;
|
|
14
|
+
padding: @padding;
|
|
15
|
+
}
|
|
16
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
color: var(--ant-color-primary);
|
|
3
|
+
background: var(--ant-color-bg-container);
|
|
4
|
+
border-color: var(--ant-color-border);
|
|
5
|
+
font-size: var(--ant-font-size);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.content {
|
|
9
|
+
color: var(--ant-color-text);
|
|
10
|
+
background-color: var(--ant-color-bg-layout);
|
|
11
|
+
border-radius: var(--ant-border-radius);
|
|
12
|
+
padding: var(--ant-padding);
|
|
13
|
+
}
|
|
14
|
+
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.palette {
|
|
4
|
+
// Gray scale
|
|
5
|
+
--gray-1: @gray1;
|
|
6
|
+
--gray-5: @gray5;
|
|
7
|
+
--gray-9: @gray9;
|
|
8
|
+
|
|
9
|
+
// Blue scale
|
|
10
|
+
--blue-1: @blue1;
|
|
11
|
+
--blue-4: @blue4;
|
|
12
|
+
--blue-6: @blue6;
|
|
13
|
+
|
|
14
|
+
// Status colors
|
|
15
|
+
--success: @green4;
|
|
16
|
+
--warning: @orange4;
|
|
17
|
+
--error: @red4;
|
|
18
|
+
|
|
19
|
+
// Special colors
|
|
20
|
+
--white: @white;
|
|
21
|
+
--black: @black;
|
|
22
|
+
}
|
|
23
|
+
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
.palette {
|
|
2
|
+
// Gray scale
|
|
3
|
+
--gray-1: var(--ant-gray1);
|
|
4
|
+
--gray-5: var(--ant-gray5);
|
|
5
|
+
--gray-9: var(--ant-gray9);
|
|
6
|
+
|
|
7
|
+
// Blue scale
|
|
8
|
+
--blue-1: var(--ant-blue1);
|
|
9
|
+
--blue-4: var(--ant-blue4);
|
|
10
|
+
--blue-6: var(--ant-blue6);
|
|
11
|
+
|
|
12
|
+
// Status colors
|
|
13
|
+
--success: var(--ant-green4);
|
|
14
|
+
--warning: var(--ant-orange4);
|
|
15
|
+
--error: var(--ant-red4);
|
|
16
|
+
|
|
17
|
+
// Special colors
|
|
18
|
+
--white: var(--ant-white);
|
|
19
|
+
--black: var(--ant-black);
|
|
20
|
+
}
|
|
21
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.card {
|
|
4
|
+
padding: @paddingSM @paddingLG;
|
|
5
|
+
border: 1px solid @colorBorder;
|
|
6
|
+
border-radius: @borderRadiusLG;
|
|
7
|
+
box-shadow: @boxShadow;
|
|
8
|
+
font-size: @fontSizeLG;
|
|
9
|
+
line-height: @lineHeight;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.text {
|
|
13
|
+
color: @colorTextSecondary;
|
|
14
|
+
font-weight: @fontWeightStrong;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (max-width: @screenMD) {
|
|
18
|
+
.card {
|
|
19
|
+
padding: @paddingXS;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.card {
|
|
2
|
+
padding: var(--ant-padding-sm) var(--ant-padding-lg);
|
|
3
|
+
border: 1px solid var(--ant-color-border);
|
|
4
|
+
border-radius: var(--ant-border-radius-lg);
|
|
5
|
+
box-shadow: var(--ant-box-shadow);
|
|
6
|
+
font-size: var(--ant-font-size-lg);
|
|
7
|
+
line-height: var(--ant-line-height);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.text {
|
|
11
|
+
color: var(--ant-color-text-secondary);
|
|
12
|
+
font-weight: var(--ant-font-weight-strong);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@media (max-width: var(--ant-screen-md)) {
|
|
16
|
+
.card {
|
|
17
|
+
padding: var(--ant-padding-xs);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.button {
|
|
4
|
+
height: @controlHeight;
|
|
5
|
+
background: @colorBgContainer;
|
|
6
|
+
|
|
7
|
+
&:hover {
|
|
8
|
+
background: @controlItemBgHover;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&:active {
|
|
12
|
+
background: @controlItemBgActive;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&.disabled {
|
|
16
|
+
background: @controlItemBgActiveDisabled;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.input {
|
|
21
|
+
height: @controlHeightSM;
|
|
22
|
+
padding: 0 @controlPaddingHorizontal;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.select {
|
|
26
|
+
height: @controlHeightLG;
|
|
27
|
+
padding: 0 @controlPaddingHorizontalSM;
|
|
28
|
+
}
|
|
29
|
+
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
.button {
|
|
2
|
+
height: var(--ant-control-height);
|
|
3
|
+
background: var(--ant-color-bg-container);
|
|
4
|
+
|
|
5
|
+
&:hover {
|
|
6
|
+
background: var(--ant-control-item-bg-hover);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
&:active {
|
|
10
|
+
background: var(--ant-control-item-bg-active);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&.disabled {
|
|
14
|
+
background: var(--ant-control-item-bg-active-disabled);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.input {
|
|
19
|
+
height: var(--ant-control-height-sm);
|
|
20
|
+
padding: 0 var(--ant-control-padding-horizontal);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.select {
|
|
24
|
+
height: var(--ant-control-height-lg);
|
|
25
|
+
padding: 0 var(--ant-control-padding-horizontal-sm);
|
|
26
|
+
}
|
|
27
|
+
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.container {
|
|
4
|
+
color: @colorText;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:global {
|
|
8
|
+
.ant-btn {
|
|
9
|
+
background: @colorPrimary;
|
|
10
|
+
border-radius: @borderRadius;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:global(.ant-modal) {
|
|
15
|
+
background: @colorBgElevated;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.local :global(.external) {
|
|
19
|
+
color: @colorTextSecondary;
|
|
20
|
+
}
|
|
21
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
color: var(--ant-color-text);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
:global {
|
|
6
|
+
.ant-btn {
|
|
7
|
+
background: var(--ant-color-primary);
|
|
8
|
+
border-radius: var(--ant-border-radius);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:global(.ant-modal) {
|
|
13
|
+
background: var(--ant-color-bg-elevated);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.local :global(.external) {
|
|
17
|
+
color: var(--ant-color-text-secondary);
|
|
18
|
+
}
|
|
19
|
+
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.fill-example {
|
|
4
|
+
background: @colorFill;
|
|
5
|
+
|
|
6
|
+
&.secondary {
|
|
7
|
+
background: @colorFillSecondary;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&.tertiary {
|
|
11
|
+
background: @colorFillTertiary;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&.quaternary {
|
|
15
|
+
background: @colorFillQuaternary;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.content {
|
|
19
|
+
background: @colorFillContent;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.alter {
|
|
23
|
+
background: @colorFillAlter;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.text-bg {
|
|
28
|
+
&:hover {
|
|
29
|
+
background: @colorBgTextHover;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:active {
|
|
33
|
+
background: @colorBgTextActive;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.fill-example {
|
|
2
|
+
background: var(--ant-color-fill);
|
|
3
|
+
|
|
4
|
+
&.secondary {
|
|
5
|
+
background: var(--ant-color-fill-secondary);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
&.tertiary {
|
|
9
|
+
background: var(--ant-color-fill-tertiary);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&.quaternary {
|
|
13
|
+
background: var(--ant-color-fill-quaternary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&.content {
|
|
17
|
+
background: var(--ant-color-fill-content);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&.alter {
|
|
21
|
+
background: var(--ant-color-fill-alter);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.text-bg {
|
|
26
|
+
&:hover {
|
|
27
|
+
background: var(--ant-color-bg-text-hover);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:active {
|
|
31
|
+
background: var(--ant-color-bg-text-active);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.card {
|
|
4
|
+
// Mixed with fixed values
|
|
5
|
+
padding: 8px @paddingSM 16px @paddingLG;
|
|
6
|
+
margin: @marginXS auto;
|
|
7
|
+
border: 1px solid @colorBorder;
|
|
8
|
+
border-radius: @borderRadius 0 0 @borderRadius;
|
|
9
|
+
|
|
10
|
+
// Transition with tokens
|
|
11
|
+
transition: all @motionDurationMid @motionEaseInOut;
|
|
12
|
+
|
|
13
|
+
// Box shadow
|
|
14
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), @boxShadowTertiary;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.text {
|
|
18
|
+
font: @fontWeight @fontSize/@lineHeight @fontFamily;
|
|
19
|
+
color: @colorText;
|
|
20
|
+
}
|
|
21
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
.card {
|
|
2
|
+
// Mixed with fixed values
|
|
3
|
+
padding: 8px var(--ant-padding-sm) 16px var(--ant-padding-lg);
|
|
4
|
+
margin: var(--ant-margin-xs) auto;
|
|
5
|
+
border: 1px solid var(--ant-color-border);
|
|
6
|
+
border-radius: var(--ant-border-radius) 0 0 var(--ant-border-radius);
|
|
7
|
+
|
|
8
|
+
// Transition with tokens
|
|
9
|
+
transition: all var(--ant-motion-duration-mid) var(--ant-motion-ease-in-out);
|
|
10
|
+
|
|
11
|
+
// Box shadow
|
|
12
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), var(--ant-box-shadow-tertiary);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.text {
|
|
16
|
+
font: var(--ant-font-weight) var(--ant-font-size)/var(--ant-line-height) var(--ant-font-family);
|
|
17
|
+
color: var(--ant-color-text);
|
|
18
|
+
}
|
|
19
|
+
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.wrapper {
|
|
4
|
+
background: @colorBgContainer;
|
|
5
|
+
|
|
6
|
+
.header {
|
|
7
|
+
color: @colorText;
|
|
8
|
+
font-size: @fontSizeLG;
|
|
9
|
+
|
|
10
|
+
&:hover {
|
|
11
|
+
color: @colorPrimary;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.body {
|
|
16
|
+
padding: @padding;
|
|
17
|
+
border: 1px solid @colorBorder;
|
|
18
|
+
|
|
19
|
+
> .content {
|
|
20
|
+
margin: @marginSM;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.wrapper {
|
|
2
|
+
background: var(--ant-color-bg-container);
|
|
3
|
+
|
|
4
|
+
.header {
|
|
5
|
+
color: var(--ant-color-text);
|
|
6
|
+
font-size: var(--ant-font-size-lg);
|
|
7
|
+
|
|
8
|
+
&:hover {
|
|
9
|
+
color: var(--ant-color-primary);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.body {
|
|
14
|
+
padding: var(--ant-padding);
|
|
15
|
+
border: 1px solid var(--ant-color-border);
|
|
16
|
+
|
|
17
|
+
> .content {
|
|
18
|
+
margin: var(--ant-margin-sm);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|