@oceanbase/codemod 1.0.0-alpha.1 → 1.0.0-alpha.11

package/README.md

@@ -316,3 +316,161 @@ transform fixed less style to antd v5 design token.
     }
   }
 ```
+
+### `less-to-cssvar`
+
+Transform Less variables to CSS variables. This transformer must be explicitly specified via `--transformer` option.
+
+```shell
+# Basic usage (auto-detect: CSS Module import → .module.css, global import → .css)
+npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar
+
+# Output as .scss instead of .css
+npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar --rename-to=scss
+
+# With custom prefix (default: ant)
+npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar --prefix=ob
+
+# Never add .module suffix (skip auto-detection)
+npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar --add-module=false
+
+# Keep .less extension (disable renaming)
+npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar --rename-to=false
+
+# Combine options: output as .scss with custom prefix
+npx -p @oceanbase/codemod codemod src --transformer=less-to-cssvar --rename-to=scss --prefix=ob
+```
+
+**Options:**
+
+| Option         | Description                                              | Default |
+| -------------- | -------------------------------------------------------- | ------- |
+| `--prefix`     | CSS variable prefix, e.g. `var(--ant-color-primary)`     | `ant`   |
+| `--rename-to`  | Target format: `css`, `scss`, or `false` to keep `.less` | `css`   |
+| `--add-module` | Add `.module` suffix when renaming                       | `true`  |
+
+**`--rename-to` 说明：**
+
+| 值      | 行为                          | 示例                        |
+| ------- | ----------------------------- | --------------------------- |
+| `css`   | 输出为 `.css` 文件（默认）    | `style.less` → `style.css`  |
+| `scss`  | 输出为 `.scss` 文件           | `style.less` → `style.scss` |
+| `false` | 保持 `.less` 扩展名，不重命名 | `style.less` → `style.less` |
+
+**`--add-module` 说明：**
+
+| 值      | 行为                                         |
+| ------- | -------------------------------------------- |
+| `true`  | 自动检测：根据导入方式判断是否添加 `.module` |
+| `false` | 跳过检测：统一不添加 `.module`               |
+
+**注意**：当 `--rename-to=false` 时，如果用户没有显式指定 `--add-module`，则 `--add-module` 会自动设置为 `false`（因为不重命名文件时，添加 `.module` 后缀没有意义）。如果用户显式指定了 `--add-module`，则使用用户指定的值。
+
+**自动检测规则：**
+
+| 导入方式                                       | 结果（CSS）      | 结果（SCSS）      |
+| ---------------------------------------------- | ---------------- | ----------------- |
+| `import styles from './xxx.less'` (CSS Module) | `xxx.module.css` | `xxx.module.scss` |
+| `import './xxx.less'` (全局样式)               | `xxx.css`        | `xxx.scss`        |
+| `global.less` / `reset.less` 等常见全局文件名  | `xxx.css`        | `xxx.scss`        |
+
+**Important Notes:**
+
+When `--rename-to` is set to `css` or `scss` (default: `css`):
+
+1. **Comment conversion**:
+   - For `.css` output: Less single-line comments (`//`) will be automatically converted to CSS block comments (`/* */`).
+   - For `.scss` output: Comments are kept as `//` (SCSS supports single-line comments).
+2. **`:global` syntax**: CSS Modules `:global` syntax will continue to work in `.module.css` or `.module.scss` files.
+3. **Import references**: Import references in JS/TS/JSX/TSX files will be **automatically updated**:
+
+```diff
+- import './style.less';
++ import './style.css';  // or './style.scss' if --rename-to=scss
+```
+
+**Example:**
+
+```diff
+- @import '~@oceanbase/design/es/theme/index.less';
+  .container {
+-   color: @colorPrimary;
+-   background: @colorBgContainer;
+-   border-color: @colorBorder;
+-   font-size: @fontSize;
++   color: var(--ant-color-primary);
++   background: var(--ant-color-bg-container);
++   border-color: var(--ant-color-border);
++   font-size: var(--ant-font-size);
+  }
+
+  .status {
+    &.success {
+-     color: @colorSuccess;
+-     background: @colorSuccessBg;
++     color: var(--ant-color-success);
++     background: var(--ant-color-success-bg);
+    }
+    &.error {
+-     color: @colorError;
+-     background: @colorErrorBg;
++     color: var(--ant-color-error);
++     background: var(--ant-color-error-bg);
+    }
+  }
+```
+
+### `sass-to-cssvar`
+
+Transform SASS/SCSS variables to CSS variables. This transformer must be explicitly specified via `--transformer` option.
+
+```shell
+# Basic usage
+npx -p @oceanbase/codemod codemod src --transformer=sass-to-cssvar
+
+# With custom prefix (default: ant)
+npx -p @oceanbase/codemod codemod src --transformer=sass-to-cssvar --prefix=ob
+```
+
+**Options:**
+
+| Option     | Description                                          | Default |
+| ---------- | ---------------------------------------------------- | ------- |
+| `--prefix` | CSS variable prefix, e.g. `var(--ant-color-primary)` | `ant`   |
+
+**Important Notes:**
+
+1. **File format**: Supports both `.sass` and `.scss` files.
+2. **Variable syntax**: Converts SASS variables (`$variableName`) to CSS variables (`var(--prefix-variable-name)`).
+3. **Token matching**: Only converts variables that match tokens from `@oceanbase/design` theme.
+4. **No file renaming**: Files keep their original `.sass` or `.scss` extension.
+
+**Example:**
+
+```diff
+  .container {
+-   color: $colorPrimary;
+-   background: $colorBgContainer;
+-   border-color: $colorBorder;
+-   font-size: $fontSize;
++   color: var(--ant-color-primary);
++   background: var(--ant-color-bg-container);
++   border-color: var(--ant-color-border);
++   font-size: var(--ant-font-size);
+  }
+
+  .status {
+    &.success {
+-     color: $colorSuccess;
+-     background: $colorSuccessBg;
++     color: var(--ant-color-success);
++     background: var(--ant-color-success-bg);
+    }
+    &.error {
+-     color: $colorError;
+-     background: $colorErrorBg;
++     color: var(--ant-color-error);
++     background: var(--ant-color-error-bg);
+    }
+  }
+```

package/bin/cli.js

@@ -13,11 +13,14 @@ const { run: jscodeshift } = require('jscodeshift/src/Runner');
 const execa = require('execa');
 const isDirectory = require('is-directory');
 const commandExistsSync = require('command-exists').sync;
+const { readPackageUp } = require('read-pkg-up');
 
 const pkg = require('../package.json');
 const pkgUpgradeList = require('./upgrade-list');
 const { getDependencies } = require('../transforms/utils/marker');
 const { lessToToken } = require('../transforms/less-to-token');
+const { lessToCssvar } = require('../transforms/less-to-cssvar');
+const { sassToCssvar } = require('../transforms/sass-to-cssvar');
 
 // jscodeshift codemod scripts dir
 const transformersDir = path.join(__dirname, '../transforms');
@@ -35,6 +38,13 @@ const transformers = [
   'less-to-token',
 ];
 
+// Transformers that must be explicitly specified via --transformer option
+// These are not run by default
+const explicitTransformers = ['less-to-cssvar', 'sass-to-cssvar'];
+
+// All available transformers
+const allTransformers = [...transformers, ...explicitTransformers];
+
 const dependencyProperties = [
   'dependencies',
   'devDependencies',
@@ -101,12 +111,16 @@ function getRunnerArgs(transformerPath, parser = 'babylon', options = {}) {
 }
 
 async function run(filePath, args = {}) {
-  const targetTransformers =
-    args.transformer?.split(',')?.filter(transformer => transformers.includes(transformer)) ||
-    transformers;
+  // When --transformer is specified, filter against all available transformers
+  // Otherwise, use default transformers only (excluding explicit-only ones like less-to-cssvar)
+  const targetTransformers = args.transformer
+    ? args.transformer.split(',').filter(transformer => allTransformers.includes(transformer))
+    : transformers;
   for (const transformer of targetTransformers) {
     await transform(transformer, 'babylon', filePath, args);
   }
+  // Return executed transformers for checking if we should skip dependency detection
+  return targetTransformers;
 }
 
 async function transform(transformer, parser, filePath, options) {
@@ -120,6 +134,58 @@ async function transform(transformer, parser, filePath, options) {
   try {
     if (transformer === 'less-to-token') {
       await lessToToken(filePath);
+    } else if (transformer === 'less-to-cssvar') {
+      // less-to-cssvar options:
+      // --prefix: CSS variable prefix (default: 'ant')
+      // --rename-to: Target format: 'css', 'scss', or false to keep .less (default: 'css')
+      // --add-module: Whether to add .module suffix when renaming (default: true)
+      //   - true (default): auto-detect based on import style (CSS Module vs global)
+      //   - false: skip detection, never add .module
+
+      // Check if user explicitly specified --add-module
+      const hasExplicitAddModule =
+        options['add-module'] !== undefined || options.addModule !== undefined;
+      const addModuleValue = options['add-module'] ?? options.addModule;
+      // Default is true (auto-detect), false means skip detection
+      let addModuleOption = addModuleValue !== false && addModuleValue !== 'false';
+
+      // Parse --rename-to option: 'css', 'scss', or false
+      let renameToOption = 'css'; // default
+      const renameToValue = options['rename-to'] ?? options.renameTo;
+      if (renameToValue === false || renameToValue === 'false') {
+        renameToOption = false;
+        // When renameTo is false, disable addModule by default (only if not explicitly specified)
+        if (!hasExplicitAddModule && addModuleOption === true) {
+          addModuleOption = false;
+        }
+      } else if (renameToValue === 'scss' || renameToValue === true) {
+        renameToOption = renameToValue === 'scss' ? 'scss' : 'css';
+      } else if (typeof renameToValue === 'string') {
+        renameToOption = renameToValue.toLowerCase() === 'scss' ? 'scss' : 'css';
+      }
+      // Backward compatibility: support --rename-to-css=false
+      else if (options['rename-to-css'] === false || options.renameToCss === false) {
+        renameToOption = false;
+        // When renameTo is false, disable addModule by default (only if not explicitly specified)
+        if (!hasExplicitAddModule && addModuleOption === true) {
+          addModuleOption = false;
+        }
+      }
+
+      const lessToCssvarOptions = {
+        prefix: options.prefix || 'ant',
+        renameTo: renameToOption,
+        addModule: addModuleOption,
+        _explicitAddModule: hasExplicitAddModule, // Pass flag to indicate explicit user choice
+      };
+      await lessToCssvar(filePath, lessToCssvarOptions);
+    } else if (transformer === 'sass-to-cssvar') {
+      // sass-to-cssvar options:
+      // --prefix: CSS variable prefix (default: 'ant')
+      const sassToCssvarOptions = {
+        prefix: options.prefix || 'ant',
+      };
+      await sassToCssvar(filePath, sassToCssvarOptions);
     } else {
       if (process.env.NODE_ENV === 'local') {
         console.log(`Running jscodeshift with: ${JSON.stringify(args)}`);
@@ -138,18 +204,79 @@ async function transform(transformer, parser, filePath, options) {
   }
 }
 
+/**
+ * Detect which package manager to use
+ * Priority:
+ * 1. Check lockfile files (pnpm-lock.yaml, yarn.lock, package-lock.json)
+ * 2. Check package.json packageManager field
+ * 3. Check if commands exist (pnpm > yarn > tnpm > npm)
+ * @param {string} cwd - Current working directory
+ * @returns {Promise<string>} - Package manager command name
+ */
+async function detectPackageManager(cwd) {
+  // 1. Check for lockfiles
+  const lockfiles = {
+    'pnpm-lock.yaml': 'pnpm',
+    'yarn.lock': 'yarn',
+    'package-lock.json': 'npm',
+  };
+
+  for (const [lockfile, manager] of Object.entries(lockfiles)) {
+    const lockfilePath = path.join(cwd, lockfile);
+    if (fs.existsSync(lockfilePath)) {
+      if (commandExistsSync(manager)) {
+        return manager;
+      }
+    }
+  }
+
+  // 2. Check package.json for packageManager field
+  try {
+    const { readPackageUp } = await import('read-pkg-up');
+    const pkgResult = await readPackageUp({ cwd });
+    if (pkgResult?.packageJson?.packageManager) {
+      const packageManager = pkgResult.packageJson.packageManager;
+      // Format: "pnpm@8.6.0" or "yarn@3.0.0"
+      const manager = packageManager.split('@')[0];
+      if (commandExistsSync(manager)) {
+        return manager;
+      }
+    }
+  } catch (e) {
+    // Ignore errors
+  }
+
+  // 3. Check if commands exist in priority order
+  const managers = ['pnpm', 'yarn', 'tnpm', 'npm'];
+  for (const manager of managers) {
+    if (commandExistsSync(manager)) {
+      return manager;
+    }
+  }
+
+  // Fallback to npm
+  return 'npm';
+}
+
 async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
   const result = [];
   const cwd = path.join(process.cwd(), targetDir);
   const { readPackageUp } = await import('read-pkg-up');
-  const closetPkgJson = await readPackageUp({ cwd });
+  let closetPkgJson;
+  try {
+    closetPkgJson = await readPackageUp({ cwd });
+  } catch (err) {
+    // 处理无效的 package.json 文件（如版本格式错误）
+    console.log(chalk.yellow(`Warning: Failed to read package.json: ${err.message}`));
+    closetPkgJson = null;
+  }
 
   let pkgJsonPath;
   if (!closetPkgJson) {
     pkgJsonPath = "we didn't find your package.json";
     // unknown dependency property
-    result.push(['install', '@oceanbase/design', pkgUpgradeList['@oceanbase/design']]);
-    result.push(['install', '@oceanbase/ui', pkgUpgradeList['@oceanbase/ui']]);
+    result.push(['install', '@oceanbase/design', pkgUpgradeList['@oceanbase/design'].version]);
+    result.push(['install', '@oceanbase/ui', pkgUpgradeList['@oceanbase/ui'].version]);
     if (needOBCharts) {
       result.push(['install', '@oceanbase/charts', pkgUpgradeList['@oceanbase/charts'].version]);
     }
@@ -219,7 +346,7 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
     )
   );
   console.log(`> Update package.json file: ${pkgJsonPath} \n`);
-  const npmCommand = commandExistsSync('tnpm') ? 'tnpm' : 'npm';
+  const npmCommand = await detectPackageManager(cwd);
 
   // install dependencies
   console.log(`New package installing...\n`);
@@ -241,23 +368,50 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
   console.log(`\nNew package installed!\n`);
 
   // uninstall dependencies
-  console.log(`Deprecated package uninstalling...\n`);
-  const uninstallDependencies = ['@alipay/ob-ui', '@alipay/ob-util', '@alipay/ob-charts'];
-  console.log(uninstallDependencies.map(n => `* ${n}`).join('\n'));
-  console.log('\n');
-  await execa(npmCommand, ['uninstall', ...uninstallDependencies, '--save'], {
-    stdio: 'inherit',
-  });
-  console.log(`\nDeprecated package uninstalled!\n`);
+  const deprecatedPackages = ['@alipay/ob-ui', '@alipay/ob-util', '@alipay/ob-charts'];
+  const uninstallDependencies = [];
+
+  if (closetPkgJson) {
+    const { packageJson } = closetPkgJson;
+    deprecatedPackages.forEach(depName => {
+      dependencyProperties.forEach(property => {
+        const versionRange = _.get(packageJson, `${property}.${depName}`);
+        if (versionRange && !uninstallDependencies.includes(depName)) {
+          uninstallDependencies.push(depName);
+        }
+      });
+    });
+  }
+  // 如果没有找到 package.json，跳过卸载操作（无法确定包是否存在）
+
+  if (uninstallDependencies.length > 0) {
+    console.log(`Deprecated package uninstalling...\n`);
+    console.log(uninstallDependencies.map(n => `* ${n}`).join('\n'));
+    console.log('\n');
+    await execa(npmCommand, ['uninstall', ...uninstallDependencies, '--save'], {
+      stdio: 'inherit',
+    });
+    console.log(`\nDeprecated package uninstalled!\n`);
+  }
 }
 
 /**
  * options
  * --force               // force skip git checking (dangerously)
  * --cpus=1              // specify cpus cores to use
- * --disablePrettier     // disable prettier
+ * --disablePrettier     // disable prettier (default: true, use --disablePrettier=false to enable)
  * --transformer=t1,t2   // specify target transformer
  * --ignore-config       // ignore config file
+ *
+ * less-to-cssvar specific options:
+ * --prefix=ant          // CSS variable prefix (default: 'ant'), e.g. var(--ant-color-primary)
+ * --rename-to           // target format: 'css' (default), 'scss', or false to keep .less
+ * --add-module          // add .module suffix when renaming (default: true)
+ *                       // true: auto-detect based on import style (CSS Module vs global)
+ *                       // false: skip detection, never add .module
+ *
+ * sass-to-cssvar specific options:
+ * --prefix=ant          // CSS variable prefix (default: 'ant'), e.g. var(--ant-color-primary)
  */
 
 async function bootstrap() {
@@ -289,9 +443,12 @@ async function bootstrap() {
     process.exit(1);
   }
 
-  await run(dir, args);
+  const executedTransformers = await run(dir, args);
 
-  if (!args.disablePrettier) {
+  // Default: disablePrettier is true (don't run prettier by default)
+  // User can enable prettier by passing --disablePrettier=false
+  const shouldRunPrettier = args.disablePrettier === false || args.disablePrettier === 'false';
+  if (shouldRunPrettier) {
     console.log('----------- Prettier Format -----------\n');
     console.log('[Prettier] format files running...');
     try {
@@ -305,19 +462,28 @@ async function bootstrap() {
     }
   }
 
-  try {
-    console.log('----------- Dependencies Alert -----------\n');
-    const depsList = await getDependencies();
-    await upgradeDetect(
-      dir,
-      depsList.includes('@oceanbase/charts'),
-      depsList.includes('@oceanbase/util')
-    );
-  } catch (err) {
-    console.log('skip summary due to', err);
-  } finally {
-    console.log(`\n----------- Thanks for using @oceanbase/codemod ${pkg.version} -----------`);
+  // Skip dependency detection if only explicit transformers are executed
+  // Explicit transformers (less-to-cssvar, sass-to-cssvar) only do code transformation
+  // and don't require dependency installation
+  const onlyExplicitTransformers =
+    executedTransformers.length > 0 &&
+    executedTransformers.every(t => explicitTransformers.includes(t));
+
+  if (!onlyExplicitTransformers) {
+    try {
+      console.log('----------- Dependencies Alert -----------\n');
+      const depsList = await getDependencies();
+      await upgradeDetect(
+        dir,
+        depsList.includes('@oceanbase/charts'),
+        depsList.includes('@oceanbase/util')
+      );
+    } catch (err) {
+      console.log('skip summary due to', err);
+    }
   }
+
+  console.log(`\n----------- Thanks for using @oceanbase/codemod ${pkg.version} -----------`);
 }
 
 module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.11",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -23,21 +23,22 @@
     "build": "father build"
   },
   "dependencies": {
-    "@oceanbase/design": "^1.0.0-alpha.1",
+    "@oceanbase/design": "^1.0.0-alpha.11",
     "chalk": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^5.1.1",
     "find-up": "^7.0.0",
-    "glob": "^11.0.3",
+    "glob": "^11.1.0",
     "is-directory": "^0.3.1",
     "is-git-clean": "^1.1.0",
     "jscodeshift": "^0.16.1",
     "lodash": "^4.17.21",
     "postcss": "^8.5.6",
     "postcss-less": "^6.0.0",
-    "prettier": "^3.6.2",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.7.4",
     "read-pkg-up": "^10.1.0",
-    "semver": "^7.7.2",
+    "semver": "^7.7.3",
     "update-check": "^1.5.4",
     "yargs-parser": "^21.1.1"
   },
@@ -47,5 +48,5 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2"
   },
-  "gitHead": "47b1ebfa75581585b83252085dddd33fc2c072a5"
+  "gitHead": "88547b0f376d0075840aa6d75aa06e654d621a9d"
 }

package/transforms/__testfixtures__/less-to-cssvar/basic.input.less

@@ -0,0 +1,16 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.container {
+  color: @colorPrimary;
+  background: @colorBgContainer;
+  border-color: @colorBorder;
+  font-size: @fontSize;
+}
+
+.content {
+  color: @colorText;
+  background-color: @colorBgLayout;
+  border-radius: @borderRadius;
+  padding: @padding;
+}
+

package/transforms/__testfixtures__/less-to-cssvar/basic.output.less

@@ -0,0 +1,14 @@
+.container {
+  color: var(--ant-color-primary);
+  background: var(--ant-color-bg-container);
+  border-color: var(--ant-color-border);
+  font-size: var(--ant-font-size);
+}
+
+.content {
+  color: var(--ant-color-text);
+  background-color: var(--ant-color-bg-layout);
+  border-radius: var(--ant-border-radius);
+  padding: var(--ant-padding);
+}
+

package/transforms/__testfixtures__/less-to-cssvar/color-scales.input.less

@@ -0,0 +1,23 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.palette {
+  // Gray scale
+  --gray-1: @gray1;
+  --gray-5: @gray5;
+  --gray-9: @gray9;
+
+  // Blue scale
+  --blue-1: @blue1;
+  --blue-4: @blue4;
+  --blue-6: @blue6;
+
+  // Status colors
+  --success: @green4;
+  --warning: @orange4;
+  --error: @red4;
+
+  // Special colors
+  --white: @white;
+  --black: @black;
+}
+

package/transforms/__testfixtures__/less-to-cssvar/color-scales.output.less

@@ -0,0 +1,21 @@
+.palette {
+  // Gray scale
+  --gray-1: var(--ant-gray1);
+  --gray-5: var(--ant-gray5);
+  --gray-9: var(--ant-gray9);
+
+  // Blue scale
+  --blue-1: var(--ant-blue1);
+  --blue-4: var(--ant-blue4);
+  --blue-6: var(--ant-blue6);
+
+  // Status colors
+  --success: var(--ant-green4);
+  --warning: var(--ant-orange4);
+  --error: var(--ant-red4);
+
+  // Special colors
+  --white: var(--ant-white);
+  --black: var(--ant-black);
+}
+

package/transforms/__testfixtures__/less-to-cssvar/complex-values.input.less

@@ -0,0 +1,22 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.card {
+  padding: @paddingSM @paddingLG;
+  border: 1px solid @colorBorder;
+  border-radius: @borderRadiusLG;
+  box-shadow: @boxShadow;
+  font-size: @fontSizeLG;
+  line-height: @lineHeight;
+}
+
+.text {
+  color: @colorTextSecondary;
+  font-weight: @fontWeightStrong;
+}
+
+@media (max-width: @screenMD) {
+  .card {
+    padding: @paddingXS;
+  }
+}
+

package/transforms/__testfixtures__/less-to-cssvar/complex-values.output.less

@@ -0,0 +1,20 @@
+.card {
+  padding: var(--ant-padding-sm) var(--ant-padding-lg);
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--ant-border-radius-lg);
+  box-shadow: var(--ant-box-shadow);
+  font-size: var(--ant-font-size-lg);
+  line-height: var(--ant-line-height);
+}
+
+.text {
+  color: var(--ant-color-text-secondary);
+  font-weight: var(--ant-font-weight-strong);
+}
+
+@media (max-width: var(--ant-screen-md)) {
+  .card {
+    padding: var(--ant-padding-xs);
+  }
+}
+

package/transforms/__testfixtures__/less-to-cssvar/control-tokens.input.less

@@ -0,0 +1,29 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.button {
+  height: @controlHeight;
+  background: @colorBgContainer;
+
+  &:hover {
+    background: @controlItemBgHover;
+  }
+
+  &:active {
+    background: @controlItemBgActive;
+  }
+
+  &.disabled {
+    background: @controlItemBgActiveDisabled;
+  }
+}
+
+.input {
+  height: @controlHeightSM;
+  padding: 0 @controlPaddingHorizontal;
+}
+
+.select {
+  height: @controlHeightLG;
+  padding: 0 @controlPaddingHorizontalSM;
+}
+