mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-15 21:48:29 +02:00
Add variable.less to support css variable (#31496)
* chore: use varaible.less * chore: basic primary varaible * chore: Move to variable * chore: align active color * chore: global fix of css variable * chore: primary colors * chore: button danger * chore: btn default error color * chore: button series * chore: More examples * chore: More components * chore: Form demo * chore: form style * fix: Tag & Alert variable * chore: update footer * chore: rm tmp code * chore: transfer * fix: picker column active color * chore: Adjust active bg color * chore: table hover color * chore: all css variables * chore: Global using variables * chore: Test case * chore: Update test logic * chore: back of default less * chore: entry of site use proxy style * chore: update entry * chore: split of variables * refactor: quick dist speed * fix: site use variable version * chore: Update less config * chore: add mv script * chore: Update repalcement script * chore: Add inject variables * chore: Update script * fix: script path * chore: Move to component instead * chore: fix condition * chore: update config * chore: Update in less transform * chore: Modify logic * chore: change to variables * chore: Update name * fix: script name * chore: do inject * revert: back of path * chore: 2 way of generate * bump tools * chore: Add auto replacement script * chore: auto genrate less file * chore: fix test * test: More test case * chore: Update limit config * test: coverage * docs: Update doc
This commit is contained in:
二货机器人
GitHub
parent
9c17f94cab
commit
36bcaaef85
60 changed files with 2760 additions and 274 deletions
221
scripts/css-variable-sync.js
Normal file
221
scripts/css-variable-sync.js
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
/**
|
||||
* 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 =========
|
||||
--@{ant-prefix}-primary-color: @base-primary;
|
||||
--@{ant-prefix}-primary-color-hover: color(~\`colorPalette('@{base-primary}', 5) \`);
|
||||
--@{ant-prefix}-primary-color-active: color(~\`colorPalette('@{base-primary}', 7) \`);
|
||||
--@{ant-prefix}-primary-color-outline: fade(@base-primary, @outline-fade);
|
||||
|
||||
// Legacy
|
||||
@legacy-primary-1: color(~\`colorPalette('@{base-primary}', 1) \`);
|
||||
|
||||
--@{ant-prefix}-primary-1: @legacy-primary-1;
|
||||
--@{ant-prefix}-primary-2: color(~\`colorPalette('@{base-primary}', 2) \`);
|
||||
--@{ant-prefix}-primary-3: color(~\`colorPalette('@{base-primary}', 3) \`);
|
||||
--@{ant-prefix}-primary-4: color(~\`colorPalette('@{base-primary}', 4) \`);
|
||||
--@{ant-prefix}-primary-5: color(~\`colorPalette('@{base-primary}', 5) \`);
|
||||
--@{ant-prefix}-primary-6: @base-primary;
|
||||
--@{ant-prefix}-primary-7: color(~\`colorPalette('@{base-primary}', 7) \`);
|
||||
|
||||
// Deprecated
|
||||
--@{ant-prefix}-primary-color-deprecated-pure: ~'';
|
||||
--@{ant-prefix}-primary-color-deprecated-l-35: lighten(@base-primary, 35%);
|
||||
--@{ant-prefix}-primary-color-deprecated-l-20: lighten(@base-primary, 20%);
|
||||
--@{ant-prefix}-primary-color-deprecated-t-20: tint(@base-primary, 20%);
|
||||
--@{ant-prefix}-primary-color-deprecated-t-50: tint(@base-primary, 50%);
|
||||
--@{ant-prefix}-primary-color-deprecated-f-12: fade(@base-primary, 12%);
|
||||
--@{ant-prefix}-primary-color-active-deprecated-f-30: fade(@legacy-primary-1, 30%);
|
||||
--@{ant-prefix}-primary-color-active-deprecated-d-02: darken(@legacy-primary-1, 2%);
|
||||
|
||||
// ========= Success Color =========
|
||||
--@{ant-prefix}-success-color: @green-6;
|
||||
--@{ant-prefix}-success-color-hover: color(~\`colorPalette('@{green-6}', 5) \`);
|
||||
--@{ant-prefix}-success-color-active: color(~\`colorPalette('@{green-6}', 7) \`);
|
||||
--@{ant-prefix}-success-color-outline: fade(@green-6, @outline-fade);
|
||||
--@{ant-prefix}-success-color-deprecated-bg: ~\`colorPalette('@{green-6}', 1) \`;
|
||||
--@{ant-prefix}-success-color-deprecated-border: ~\`colorPalette('@{green-6}', 3) \`;
|
||||
|
||||
// ========== Error Color ==========
|
||||
--@{ant-prefix}-error-color: @red-5;
|
||||
--@{ant-prefix}-error-color-hover: color(~\`colorPalette('@{red-5}', 5) \`);
|
||||
--@{ant-prefix}-error-color-active: color(~\`colorPalette('@{red-5}', 7) \`);
|
||||
--@{ant-prefix}-error-color-outline: fade(@red-5, @outline-fade);
|
||||
--@{ant-prefix}-error-color-deprecated-bg: ~\`colorPalette('@{red-5}', 1) \`;
|
||||
--@{ant-prefix}-error-color-deprecated-border: ~\`colorPalette('@{red-5}', 3) \`;
|
||||
|
||||
// ========= Warning Color =========
|
||||
--@{ant-prefix}-warning-color: @gold-6;
|
||||
--@{ant-prefix}-warning-color-hover: color(~\`colorPalette('@{gold-6}', 5) \`);
|
||||
--@{ant-prefix}-warning-color-active: color(~\`colorPalette('@{gold-6}', 7) \`);
|
||||
--@{ant-prefix}-warning-color-outline: fade(@gold-6, @outline-fade);
|
||||
--@{ant-prefix}-warning-color-deprecated-bg: ~\`colorPalette('@{gold-6}', 1) \`;
|
||||
--@{ant-prefix}-warning-color-deprecated-border: ~\`colorPalette('@{gold-6}', 3) \`;
|
||||
|
||||
// ========== Info Color ===========
|
||||
--@{ant-prefix}-info-color: @base-primary;
|
||||
--@{ant-prefix}-info-color-deprecated-bg: ~\`colorPalette('@{base-primary}', 1) \`;
|
||||
--@{ant-prefix}-info-color-deprecated-border: ~\`colorPalette('@{base-primary}', 3) \`;
|
||||
}
|
||||
`.trim(),
|
||||
);
|
||||
|
||||
// >>> Primary
|
||||
replaceVariable('primary-color', "~'var(--@{ant-prefix}-primary-color)'");
|
||||
replaceVariable('primary-color-hover', "~'var(--@{ant-prefix}-primary-color-hover)'");
|
||||
replaceVariable('primary-color-active', "~'var(--@{ant-prefix}-primary-color-active)'");
|
||||
replaceVariable('primary-color-outline', "~'var(--@{ant-prefix}-primary-color-outline)'");
|
||||
|
||||
replaceVariable('processing-color', '@primary-color');
|
||||
|
||||
// >>> Info
|
||||
replaceVariable('info-color', "~'var(--@{ant-prefix}-info-color)'");
|
||||
replaceVariable('info-color-deprecated-bg', "~'var(--@{ant-prefix}-info-color-deprecated-bg)'");
|
||||
replaceVariable(
|
||||
'info-color-deprecated-border',
|
||||
"~'var(--@{ant-prefix}-info-color-deprecated-border)'",
|
||||
);
|
||||
|
||||
// >>> Success
|
||||
replaceVariable('success-color', "~'var(--@{ant-prefix}-success-color)'");
|
||||
replaceVariable('success-color-hover', "~'var(--@{ant-prefix}-success-color-hover)'");
|
||||
replaceVariable('success-color-active', "~'var(--@{ant-prefix}-success-color-active)'");
|
||||
replaceVariable('success-color-outline', "~'var(--@{ant-prefix}-success-color-outline)'");
|
||||
replaceVariable(
|
||||
'success-color-deprecated-bg',
|
||||
"~'var(--@{ant-prefix}-success-color-deprecated-bg)'",
|
||||
);
|
||||
replaceVariable(
|
||||
'success-color-deprecated-border',
|
||||
"~'var(--@{ant-prefix}-success-color-deprecated-border)'",
|
||||
);
|
||||
|
||||
// >>> Warning
|
||||
replaceVariable('warning-color', "~'var(--@{ant-prefix}-warning-color)'");
|
||||
replaceVariable('warning-color-hover', "~'var(--@{ant-prefix}-warning-color-hover)'");
|
||||
replaceVariable('warning-color-active', "~'var(--@{ant-prefix}-warning-color-active)'");
|
||||
replaceVariable('warning-color-outline', "~'var(--@{ant-prefix}-warning-color-outline)'");
|
||||
replaceVariable(
|
||||
'warning-color-deprecated-bg',
|
||||
"~'var(--@{ant-prefix}-warning-color-deprecated-bg)'",
|
||||
);
|
||||
replaceVariable(
|
||||
'warning-color-deprecated-border',
|
||||
"~'var(--@{ant-prefix}-warning-color-deprecated-border)'",
|
||||
);
|
||||
|
||||
// >>> Error
|
||||
replaceVariable('error-color', "~'var(--@{ant-prefix}-error-color)'");
|
||||
replaceVariable('error-color-hover', "~'var(--@{ant-prefix}-error-color-hover)'");
|
||||
replaceVariable('error-color-active', "~'var(--@{ant-prefix}-error-color-active)'");
|
||||
replaceVariable('error-color-outline', "~'var(--@{ant-prefix}-error-color-outline)'");
|
||||
replaceVariable('error-color-deprecated-bg', "~'var(--@{ant-prefix}-error-color-deprecated-bg)'");
|
||||
replaceVariable(
|
||||
'error-color-deprecated-border',
|
||||
"~'var(--@{ant-prefix}-error-color-deprecated-border)'",
|
||||
);
|
||||
|
||||
// >>> Primary Level Color
|
||||
replaceVariable('primary-1', "~'var(--@{ant-prefix}-primary-1)'");
|
||||
replaceVariable('primary-2', "~'var(--@{ant-prefix}-primary-2)'");
|
||||
replaceVariable('primary-3', "~'var(--@{ant-prefix}-primary-3)'");
|
||||
replaceVariable('primary-4', "~'var(--@{ant-prefix}-primary-4)'");
|
||||
replaceVariable('primary-5', "~'var(--@{ant-prefix}-primary-5)'");
|
||||
replaceVariable('primary-6', "~'var(--@{ant-prefix}-primary-6)'");
|
||||
replaceVariable('primary-7', "~'var(--@{ant-prefix}-primary-7)'");
|
||||
|
||||
// Link
|
||||
replaceVariable('link-hover-color', '@primary-color-hover');
|
||||
replaceVariable('link-active-color', '@primary-color-active');
|
||||
|
||||
replaceVariable(
|
||||
'table-selected-row-hover-bg',
|
||||
"~'var(--@{ant-prefix}-primary-color-active-deprecated-d-02)'",
|
||||
);
|
||||
|
||||
replaceVariable(
|
||||
'picker-basic-cell-hover-with-range-color',
|
||||
"~'var(--@{ant-prefix}-primary-color-deprecated-l-35)'",
|
||||
);
|
||||
replaceVariable(
|
||||
'picker-date-hover-range-border-color',
|
||||
"~'var(--@{ant-prefix}-primary-color-deprecated-l-20)'",
|
||||
);
|
||||
|
||||
replaceVariable(
|
||||
'calendar-column-active-bg',
|
||||
"~'var(--@{ant-prefix}-primary-color-active-deprecated-f-30)'",
|
||||
);
|
||||
|
||||
replaceVariable(
|
||||
'slider-handle-color-focus',
|
||||
"~'var(--@{ant-prefix}-primary-color-deprecated-t-20)'",
|
||||
);
|
||||
replaceVariable(
|
||||
'slider-handle-color-focus-shadow',
|
||||
"~'var(--@{ant-prefix}-primary-color-deprecated-f-12)'",
|
||||
);
|
||||
replaceVariable(
|
||||
'slider-dot-border-color-active',
|
||||
"~'var(--@{ant-prefix}-primary-color-deprecated-t-50)'",
|
||||
);
|
||||
|
||||
replaceVariable(
|
||||
'transfer-item-selected-hover-bg',
|
||||
"~'var(--@{ant-prefix}-primary-color-active-deprecated-d-02)'",
|
||||
);
|
||||
|
||||
replaceVariable('alert-success-border-color', '@success-color-deprecated-border');
|
||||
replaceVariable('alert-success-bg-color', '@success-color-deprecated-bg');
|
||||
replaceVariable('alert-info-border-color', '@info-color-deprecated-border');
|
||||
replaceVariable('alert-info-bg-color', '@info-color-deprecated-bg');
|
||||
replaceVariable('alert-warning-border-color', '@warning-color-deprecated-border');
|
||||
replaceVariable('alert-warning-bg-color', '@warning-color-deprecated-bg');
|
||||
replaceVariable('alert-error-border-color', '@error-color-deprecated-border');
|
||||
replaceVariable('alert-error-bg-color', '@error-color-deprecated-bg');
|
||||
|
||||
fse.writeFileSync(targetPath, variableContent, 'utf8');
|
||||
|
||||
console.log(chalk.green('Success! Replaced path:'), targetPath);
|
||||
Loading…
Add table
Add a link
Reference in a new issue