mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
327 lines
6.8 KiB
TypeScript
327 lines
6.8 KiB
TypeScript
/**
|
|
* 基础变量配置项,生成对应的 combo 配置项
|
|
*/
|
|
|
|
const colors = [
|
|
{
|
|
label: '文字颜色',
|
|
name: '--text-color',
|
|
cxdValue: '#666',
|
|
antdValue: 'rgba(0, 0, 0, 0.85)'
|
|
},
|
|
{
|
|
label: '文字置灰时的颜色',
|
|
name: '--text--muted-color',
|
|
cxdValue: '#a6a6a6',
|
|
antdValue: 'rgba(64, 64, 64, 0.85)'
|
|
},
|
|
{
|
|
label: '标题文字颜色',
|
|
name: '--text--loud-color',
|
|
cxdValue: '#4d4d4d',
|
|
antdValue: 'rgba(0, 0, 0, 0.85)'
|
|
},
|
|
{
|
|
label: '按钮文字颜色',
|
|
name: '--button-color',
|
|
cxdValue: '#fff',
|
|
antdValue: '#fff'
|
|
},
|
|
|
|
{label: '最浅色', name: '--light', cxdValue: '#eaf6fe', antdValue: '#d9d9d9'},
|
|
{label: '最深色', name: '--dark', cxdValue: '#343a40', antdValue: '#343a40'},
|
|
{
|
|
label: '全局背景色',
|
|
name: '--body-bg',
|
|
cxdValue: '#eaf6fe',
|
|
antdValue: '#d9d9d9'
|
|
},
|
|
{
|
|
label: '常用背景色',
|
|
name: '--background',
|
|
cxdValue: '#fff',
|
|
antdValue: '#fff'
|
|
},
|
|
{
|
|
label: '主颜色',
|
|
name: '--primary',
|
|
cxdValue: '#108cee',
|
|
antdValue: '#1890ff'
|
|
},
|
|
{
|
|
label: '主颜色鼠标放上去的颜色',
|
|
name: '--primary-onHover',
|
|
cxdValue: '#0e77ca',
|
|
antdValue: '#007df1'
|
|
},
|
|
{
|
|
label: '主颜色激活时的颜色',
|
|
name: '--primary-onActive',
|
|
cxdValue: '#0d70be',
|
|
antdValue: '#0076e4'
|
|
},
|
|
{
|
|
label: '次颜色',
|
|
name: '--secondary',
|
|
cxdValue: '#6c757d',
|
|
antdValue: '#6c757d'
|
|
},
|
|
{
|
|
label: '次颜色鼠标放上去的颜色',
|
|
name: '--secondary-onHover',
|
|
cxdValue: '#5a6268',
|
|
antdValue: '#5a6268'
|
|
},
|
|
{
|
|
label: '次颜色激活时的颜色',
|
|
name: '--secondary-onActive',
|
|
cxdValue: '#545b62',
|
|
antdValue: '#545b62'
|
|
},
|
|
{
|
|
label: '成功时的颜色',
|
|
name: '--success',
|
|
cxdValue: '#5fb333',
|
|
antdValue: '#52c41a'
|
|
},
|
|
{
|
|
label: '成功时在鼠标移上去后的颜色',
|
|
name: '--success-onHover',
|
|
cxdValue: '#4f952b',
|
|
antdValue: '#44a216'
|
|
},
|
|
{
|
|
label: '成功时激活的颜色',
|
|
name: '--success-onActive',
|
|
cxdValue: '#4a8b28',
|
|
antdValue: '#3f9714'
|
|
},
|
|
{
|
|
label: '信息的颜色',
|
|
name: '--info',
|
|
cxdValue: '#108cee',
|
|
antdValue: '#1890ff'
|
|
},
|
|
{
|
|
label: '信息在鼠标移上去后的颜色',
|
|
name: '--info-onHover',
|
|
cxdValue: '#0e77ca',
|
|
antdValue: '#007df1'
|
|
},
|
|
{
|
|
label: '信息在激活时的颜色',
|
|
name: '--info-onActive',
|
|
cxdValue: '#0d70be',
|
|
antdValue: '#0076e4'
|
|
},
|
|
{
|
|
label: '警告的颜色',
|
|
name: '--warning',
|
|
cxdValue: '#f39000',
|
|
antdValue: '#faad14'
|
|
},
|
|
{
|
|
label: '警告在鼠标移上去后的颜色',
|
|
name: '--warning-onHover',
|
|
cxdValue: '#cd7900',
|
|
antdValue: '#e39905'
|
|
},
|
|
{
|
|
label: '警告在鼠标移上去后的颜色',
|
|
name: '--warning-onActive',
|
|
cxdValue: '#c07200',
|
|
antdValue: '#d69005'
|
|
},
|
|
{
|
|
label: '错误的颜色',
|
|
name: '--danger',
|
|
cxdValue: '#ea2e2e',
|
|
antdValue: '#ff4d4f'
|
|
},
|
|
{
|
|
label: '错误在鼠标移上去后的颜色',
|
|
name: '--danger-onHover',
|
|
cxdValue: '#dc1616',
|
|
antdValue: '#ff2729'
|
|
},
|
|
{
|
|
label: '错误在激活时的颜色',
|
|
name: '--danger-onActive',
|
|
cxdValue: '#d01515',
|
|
antdValue: '#ff1a1d'
|
|
}
|
|
];
|
|
|
|
export const colorControls: any = [];
|
|
|
|
for (const color of colors) {
|
|
colorControls.push({
|
|
type: 'group',
|
|
controls: [
|
|
{
|
|
type: 'input-color',
|
|
label: color.label,
|
|
name: `config.theme._vars["${color.name}"]`
|
|
},
|
|
{
|
|
label: '云舍默认值',
|
|
type: 'static-color',
|
|
value: color.cxdValue,
|
|
visibleOn: 'data.config.theme.baseTheme === "cxd"',
|
|
inputClassName: 'text-xs'
|
|
},
|
|
{
|
|
label: 'AntD 默认值',
|
|
type: 'static-color',
|
|
value: color.antdValue,
|
|
visibleOn: 'data.config.theme.baseTheme === "antd"',
|
|
inputClassName: 'text-xs'
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
const fonts = [
|
|
{
|
|
label: '基础字体',
|
|
name: '--fontFamilyBase',
|
|
defaultValue:
|
|
"-apple-system, BlinkMacSystemFont, 'SF Pro SC', 'SF Pro Text', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Segoe UI', Roboto, 'Hiragino Sans GB', 'Arial', 'microsoft yahei ui', 'Microsoft YaHei',SimSun, sans-serif"
|
|
},
|
|
{
|
|
label: '等宽字体',
|
|
name: '--fontFamilyMonospace',
|
|
defaultValue:
|
|
"SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
|
|
},
|
|
{
|
|
label: '基础字体大小',
|
|
name: '--fontSizeBase',
|
|
defaultValue: '14px'
|
|
},
|
|
{
|
|
label: '最小字体大小',
|
|
name: '--fontSizeXs',
|
|
defaultValue: '11px'
|
|
},
|
|
{
|
|
label: '小字体大小',
|
|
name: '--fontSizeSm',
|
|
defaultValue: '12px'
|
|
},
|
|
{
|
|
label: '中型字体大小',
|
|
name: '--fontSizeMd',
|
|
defaultValue: '14px'
|
|
},
|
|
{
|
|
label: '大字体大小',
|
|
name: '--fontSizeLg',
|
|
defaultValue: '16px'
|
|
},
|
|
{
|
|
label: '超大字体大小',
|
|
name: '--fontSizeXl',
|
|
defaultValue: '20px'
|
|
},
|
|
{
|
|
label: '行高',
|
|
name: '--lineHeightBase',
|
|
defaultValue: '1.5'
|
|
}
|
|
];
|
|
|
|
export const fontControls: any = [];
|
|
|
|
for (const font of fonts) {
|
|
fontControls.push({
|
|
type: 'input-text',
|
|
label: font.label,
|
|
name: `config.theme._vars["${font.name}"]`,
|
|
placeholder: font.defaultValue
|
|
});
|
|
}
|
|
|
|
const sizes = [
|
|
{
|
|
label: '基础间距',
|
|
name: '--gap-base',
|
|
defaultValue: '12px'
|
|
},
|
|
{
|
|
label: '最小间距',
|
|
name: '--gap-xs',
|
|
defaultValue: '4px'
|
|
},
|
|
{
|
|
label: '小间距',
|
|
name: '--gap-sm',
|
|
defaultValue: '8px'
|
|
},
|
|
{
|
|
label: '中间距',
|
|
name: '--gap-md',
|
|
defaultValue: '16px'
|
|
},
|
|
{
|
|
label: '小间距',
|
|
name: '--gap-lg',
|
|
defaultValue: '20px'
|
|
},
|
|
{
|
|
label: '小间距',
|
|
name: '--gap-xl',
|
|
defaultValue: '24px'
|
|
}
|
|
];
|
|
|
|
export const sizeControls: any = [];
|
|
|
|
for (const size of sizes) {
|
|
sizeControls.push({
|
|
type: 'input-text',
|
|
label: size.label,
|
|
name: `config.theme._vars["${size.name}"]`,
|
|
placeholder: size.defaultValue
|
|
});
|
|
}
|
|
|
|
export const borderControls: any = [
|
|
{
|
|
type: 'input-color',
|
|
label: '边框颜色',
|
|
name: 'config.theme._vars["--buttonColor"]'
|
|
},
|
|
{
|
|
type: 'input-text',
|
|
label: '边框圆角大小',
|
|
placeholder: '2px',
|
|
name: 'config.theme._vars["--borderRadius"]'
|
|
}
|
|
];
|
|
|
|
export const linkControls: any = [
|
|
{
|
|
type: 'input-color',
|
|
label: '链接颜色',
|
|
name: 'config.theme._vars["--link-color"]'
|
|
},
|
|
{
|
|
type: 'input-color',
|
|
label: '链接在鼠标移上去的颜色',
|
|
name: 'config.theme._vars["--link-onHover-color"]'
|
|
},
|
|
{
|
|
type: 'input-text',
|
|
label: '链接下划线',
|
|
placeholder: 'none',
|
|
name: 'config.theme._vars["--link-decoration"]'
|
|
},
|
|
{
|
|
type: 'input-text',
|
|
label: '链接在鼠标移上去后端下划线',
|
|
placeholder: 'none',
|
|
name: 'config.theme._vars["--link-onHover-decoration"]'
|
|
}
|
|
];
|