wetrade-design/scripts/css-variable-sync.js

一款多语言支持Vue3的UI框架

/**
 * ZombieJ: Since we still need mainly maintain the `default.less`. Create a script that generate
 * `variable.less` from the `default.less`
 */

const fse = require('fs-extra');
const path = require('path');
const chalk = require('chalk');

const folderPath = path.resolve(__dirname, '..', 'components', 'style', 'themes');
const targetPath = path.resolve(folderPath, 'variable.less');

const defaultContent = fse.readFileSync(path.resolve(folderPath, 'default.less'), 'utf8');

// const variableContent = fse.readFileSync(
//   path.resolve(__dirname, '..', 'components', 'style', 'themes', 'variable.less'),
//   'utf8',
// );

let variableContent = defaultContent;

function replaceVariable(key, value) {
  variableContent = variableContent.replace(new RegExp(`@${key}:[^;]*;`), `@${key}: ${value};`);
}

function replaceVariableContent(key, content) {
  const lines = variableContent.split(/\n/);
  const startIndex = lines.findIndex(line => line.includes(`[CSS-VARIABLE-REPLACE-BEGIN: ${key}]`));
  const endIndex = lines.findIndex(line => line.includes(`[CSS-VARIABLE-REPLACE-END: ${key}]`));

  if (startIndex !== -1 && endIndex !== -1) {
    variableContent = [...lines.slice(0, startIndex), content, ...lines.slice(endIndex + 1)].join(
      '\n',
    );
  }
}

replaceVariable('theme', 'variable');

replaceVariableContent(
  'html-variables',
  `
html {
  @base-primary: @blue-6;

  // ========= Primary Color =========
  --@{wd-prefix}-brand-primary: @base-primary;
  --@{wd-prefix}-brand-hover: color(~\`colorPalette('@{base-primary}', 5) \`);
  --@{wd-prefix}-brand-active: color(~\`colorPalette('@{base-primary}', 7) \`);
  --@{wd-prefix}-brand-primary-outline: fade(@base-primary, @outline-fade);

  // Legacy
  @legacy-primary-1: color(~\`colorPalette('@{base-primary}', 1) \`);

  --@{wd-prefix}-primary-1: @legacy-primary-1;
  --@{wd-prefix}-primary-2: color(~\`colorPalette('@{base-primary}', 2) \`);
  --@{wd-prefix}-primary-3: color(~\`colorPalette('@{base-primary}', 3) \`);
  --@{wd-prefix}-primary-4: color(~\`colorPalette('@{base-primary}', 4) \`);
  --@{wd-prefix}-primary-5: color(~\`colorPalette('@{base-primary}', 5) \`);
  --@{wd-prefix}-primary-6: @base-primary;
  --@{wd-prefix}-primary-7: color(~\`colorPalette('@{base-primary}', 7) \`);

  // Deprecated
  --@{wd-prefix}-brand-primary-deprecated-pure: ~'';
  --@{wd-prefix}-brand-primary-deprecated-l-35: lighten(@base-primary, 35%);
  --@{wd-prefix}-brand-primary-deprecated-l-20: lighten(@base-primary, 20%);
  --@{wd-prefix}-brand-primary-deprecated-t-20: tint(@base-primary, 20%);
  --@{wd-prefix}-brand-primary-deprecated-t-50: tint(@base-primary, 50%);
  --@{wd-prefix}-brand-primary-deprecated-f-12: fade(@base-primary, 12%);
  --@{wd-prefix}-brand-primary-active-deprecated-f-30: fade(@legacy-primary-1, 30%);
  --@{wd-prefix}-brand-primary-active-deprecated-d-02: darken(@legacy-primary-1, 2%);

  // ========= Success Color =========
  --@{wd-prefix}-fluctuation-fall-fall: @green-500;
  --@{wd-prefix}-fluctuation-fall-hover: color(~\`colorPalette('@{green-6}', 5) \`);
  --@{wd-prefix}-fluctuation-fall-active: color(~\`colorPalette('@{green-6}', 7) \`);
  --@{wd-prefix}-fluctuation-fall-fall-outline: fade(@green-6, @outline-fade);
  --@{wd-prefix}-fluctuation-fall-deprecated-bg: ~\`colorPalette('@{green-6}', 1) \`;
  --@{wd-prefix}-fluctuation-fall-deprecated-border: ~\`colorPalette('@{green-6}', 3) \`;

  // ========== Error Color ==========
  --@{wd-prefix}-fluctuation-rise-rise: @red-5;
  --@{wd-prefix}-fluctuation-rise-hover: color(~\`colorPalette('@{red-5}', 5) \`);
  --@{wd-prefix}-fluctuation-rise-active: color(~\`colorPalette('@{red-5}', 7) \`);
  --@{wd-prefix}-fluctuation-rise-rise-outline: fade(@red-5, @outline-fade);
  --@{wd-prefix}-fluctuation-rise-rise-deprecated-bg: ~\`colorPalette('@{red-5}', 1) \`;
  --@{wd-prefix}-fluctuation-rise-rise-deprecated-border: ~\`colorPalette('@{red-5}', 3) \`;

  // ========= Warning Color =========
  --@{wd-prefix}-trade-selling-sellinging: @gold-6;
  --@{wd-prefix}-trade-selling-hover: color(~\`colorPalette('@{gold-6}', 5) \`);
  --@{wd-prefix}-trade-selling-active: color(~\`colorPalette('@{gold-6}', 7) \`);
  --@{wd-prefix}-trade-selling-sellinging-outline: fade(@gold-6, @outline-fade);
  --@{wd-prefix}-trade-selling-sellinging-deprecated-bg: ~\`colorPalette('@{gold-6}', 1) \`;
  --@{wd-prefix}-trade-selling-sellinging-deprecated-border: ~\`colorPalette('@{gold-6}', 3) \`;

  // ========== Info Color ===========
  --@{wd-prefix}-trade-buy-buy: @base-primary;
  --@{wd-prefix}-trade-buy-buy-deprecated-bg: ~\`colorPalette('@{base-primary}', 1) \`;
  --@{wd-prefix}-trade-buy-buy-deprecated-border: ~\`colorPalette('@{base-primary}', 3) \`;
}
`.trim(),
);

// >>> Primary
replaceVariable('brand-primary', "~'var(--@{wd-prefix}-brand-primary)'");
replaceVariable('brand-hover', "~'var(--@{wd-prefix}-brand-hover)'");
replaceVariable('brand-active', "~'var(--@{wd-prefix}-brand-active)'");
replaceVariable('brand-primary-outline', "~'var(--@{wd-prefix}-brand-primary-outline)'");

replaceVariable('processing-color', '@brand-primary');

// >>> Info
replaceVariable('trade-buy-buy', "~'var(--@{wd-prefix}-trade-buy-buy)'");
replaceVariable(
  'trade-buy-buy-deprecated-bg',
  "~'var(--@{wd-prefix}-trade-buy-buy-deprecated-bg)'",
);
replaceVariable(
  'trade-buy-buy-deprecated-border',
  "~'var(--@{wd-prefix}-trade-buy-buy-deprecated-border)'",
);

// >>> Success
replaceVariable('fluctuation-fall-fall', "~'var(--@{wd-prefix}-fluctuation-fall-fall)'");
replaceVariable('fluctuation-fall-hover', "~'var(--@{wd-prefix}-fluctuation-fall-hover)'");
replaceVariable('fluctuation-fall-active', "~'var(--@{wd-prefix}-fluctuation-fall-active)'");
replaceVariable(
  'fluctuation-fall-fall-outline',
  "~'var(--@{wd-prefix}-fluctuation-fall-fall-outline)'",
);
replaceVariable(
  'fluctuation-fall-deprecated-bg',
  "~'var(--@{wd-prefix}-fluctuation-fall-deprecated-bg)'",
);
replaceVariable(
  'fluctuation-fall-deprecated-border',
  "~'var(--@{wd-prefix}-fluctuation-fall-deprecated-border)'",
);

// >>> Warning
replaceVariable('trade-selling-sellinging', "~'var(--@{wd-prefix}-trade-selling-sellinging)'");
replaceVariable('trade-selling-hover', "~'var(--@{wd-prefix}-trade-selling-hover)'");
replaceVariable('trade-selling-active', "~'var(--@{wd-prefix}-trade-selling-active)'");
replaceVariable(
  'trade-selling-sellinging-outline',
  "~'var(--@{wd-prefix}-trade-selling-sellinging-outline)'",
);
replaceVariable(
  'trade-selling-sellinging-deprecated-bg',
  "~'var(--@{wd-prefix}-trade-selling-sellinging-deprecated-bg)'",
);
replaceVariable(
  'trade-selling-sellinging-deprecated-border',
  "~'var(--@{wd-prefix}-trade-selling-sellinging-deprecated-border)'",
);

// >>> Error
replaceVariable('fluctuation-rise-rise', "~'var(--@{wd-prefix}-fluctuation-rise-rise)'");
replaceVariable('fluctuation-rise-hover', "~'var(--@{wd-prefix}-fluctuation-rise-hover)'");
replaceVariable('fluctuation-rise-active', "~'var(--@{wd-prefix}-fluctuation-rise-active)'");
replaceVariable(
  'fluctuation-rise-rise-outline',
  "~'var(--@{wd-prefix}-fluctuation-rise-rise-outline)'",
);
replaceVariable(
  'fluctuation-rise-rise-deprecated-bg',
  "~'var(--@{wd-prefix}-fluctuation-rise-rise-deprecated-bg)'",
);
replaceVariable(
  'fluctuation-rise-rise-deprecated-border',
  "~'var(--@{wd-prefix}-fluctuation-rise-rise-deprecated-border)'",
);

// >>> Primary Level Color
replaceVariable('primary-1', "~'var(--@{wd-prefix}-primary-1)'");
replaceVariable('primary-2', "~'var(--@{wd-prefix}-primary-2)'");
replaceVariable('primary-3', "~'var(--@{wd-prefix}-primary-3)'");
replaceVariable('primary-4', "~'var(--@{wd-prefix}-primary-4)'");
replaceVariable('primary-5', "~'var(--@{wd-prefix}-primary-5)'");
replaceVariable('primary-6', "~'var(--@{wd-prefix}-primary-6)'");
replaceVariable('primary-7', "~'var(--@{wd-prefix}-primary-7)'");

// Link
replaceVariable('link-hover-color', '@brand-hover');
replaceVariable('link-active-color', '@brand-active');

replaceVariable(
  'table-selected-row-hover-bg',
  "~'var(--@{wd-prefix}-brand-primary-active-deprecated-d-02)'",
);

replaceVariable(
  'picker-basic-cell-hover-with-range-color',
  "~'var(--@{wd-prefix}-brand-primary-deprecated-l-35)'",
);
replaceVariable(
  'picker-date-hover-range-border-color',
  "~'var(--@{wd-prefix}-brand-primary-deprecated-l-20)'",
);

replaceVariable(
  'calendar-column-active-bg',
  "~'var(--@{wd-prefix}-brand-primary-active-deprecated-f-30)'",
);

replaceVariable(
  'slider-handle-color-focus',
  "~'var(--@{wd-prefix}-brand-primary-deprecated-t-20)'",
);
replaceVariable(
  'slider-handle-color-focus-shadow',
  "~'var(--@{wd-prefix}-brand-primary-deprecated-f-12)'",
);
replaceVariable(
  'slider-dot-border-color-active',
  "~'var(--@{wd-prefix}-brand-primary-deprecated-t-50)'",
);

replaceVariable(
  'transfer-item-selected-hover-bg',
  "~'var(--@{wd-prefix}-brand-primary-active-deprecated-d-02)'",
);

replaceVariable('alert-success-border-color', '@fluctuation-fall-deprecated-border');
replaceVariable('alert-success-bg-color', '@fluctuation-fall-deprecated-bg');
replaceVariable('alert-info-border-color', '@trade-buy-buy-deprecated-border');
replaceVariable('alert-info-bg-color', '@trade-buy-buy-deprecated-bg');
replaceVariable('alert-warning-border-color', '@trade-selling-sellinging-deprecated-border');
replaceVariable('alert-warning-bg-color', '@trade-selling-sellinging-deprecated-bg');
replaceVariable('alert-error-border-color', '@fluctuation-rise-rise-deprecated-border');
replaceVariable('alert-error-bg-color', '@fluctuation-rise-rise-deprecated-bg');

fse.writeFileSync(targetPath, variableContent, 'utf8');

// eslint-disable-next-line no-console
console.log(chalk.green('Success! Replaced path:'), targetPath);