diff --git a/examples/components/theme-configurator/docStyle.vue b/examples/components/theme-configurator/docStyle.vue
index 434ad103970..83ceb6df704 100644
--- a/examples/components/theme-configurator/docStyle.vue
+++ b/examples/components/theme-configurator/docStyle.vue
@@ -6,17 +6,19 @@ export default {
data() {
return {
docs: '', // content of docs css
- theme: ORIGINAL_THEME
+ theme: ORIGINAL_THEME,
+ asyncCb: true
};
},
methods: {
- updateDocStyle(e) {
+ updateDocStyle(e, cb) {
const val = e.global['$--color-primary'] || ORIGINAL_THEME;
const oldVal = this.theme;
const getHandler = (variable, id) => {
return () => {
let newStyle = this.updateStyle(this[variable], ORIGINAL_THEME, val);
updateDomHeadStyle(id, newStyle);
+ this.asyncCb && cb();
};
};
const docsHandler = getHandler('docs', 'docs-style');
@@ -24,11 +26,14 @@ export default {
const links = [].filter.call(document.querySelectorAll('link'), link => {
return /docs\..+\.css/.test(link.href || '');
});
- links[0] && this.getCSSString(links[0].href, docsHandler, 'docs');
+ if (links[0]) {
+ this.getCSSString(links[0].href, docsHandler, 'docs');
+ } else {
+ this.asyncCb = false;
+ }
} else {
docsHandler();
}
-
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText;
@@ -40,6 +45,7 @@ export default {
style.innerText = this.updateStyle(innerText, oldVal, val);
});
this.theme = val;
+ !this.asyncCb && cb();
},
updateStyle(style, oldColor, newColor) {
return style.replace(new RegExp(oldColor, 'ig'), newColor);
diff --git a/examples/components/theme-configurator/download.vue b/examples/components/theme-configurator/download.vue
index 56ece1853fb..5f69c1fd00f 100644
--- a/examples/components/theme-configurator/download.vue
+++ b/examples/components/theme-configurator/download.vue
@@ -8,6 +8,7 @@
{{getActionDisplayName("download-theme")}}
diff --git a/examples/components/theme-configurator/editor/boxShadow.vue b/examples/components/theme-configurator/editor/boxShadow.vue
index 2e937f6ed52..bfcd8eebb4d 100644
--- a/examples/components/theme-configurator/editor/boxShadow.vue
+++ b/examples/components/theme-configurator/editor/boxShadow.vue
@@ -74,6 +74,7 @@
.plus-button {
position: absolute;
left: 90%;
+ margin-top: 4px;
}
.colorPicker {
margin-left: 0;
diff --git a/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue b/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue
index da3d99ea8b7..0230eed8985 100644
--- a/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue
+++ b/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue
@@ -10,9 +10,9 @@
{{item.info.label}}
-
-
- {{item.info.value}}
+
+ {{item.info.value}}
+
@@ -34,6 +34,7 @@
width: 100%;
cursor: pointer;
margin: 2px 0;
+ position: relative;
}
.color-list-item:hover {
background: #efefef;
@@ -44,22 +45,19 @@
margin-top: 2px;
margin-left: 5px;
border-radius: 100%;
- display: inline-block;
+ display: block;
+ position: absolute;
}
.color-list-item-label {
- margin-left: 15px;
+ margin-left: 35px;
font-size: 13px;
line-height: 24px;
display: inline-block;
- vertical-align: super;
- width: 30%;
+ width: 85%;
+ overflow: hidden;
}
.color-list-item-value {
- margin-left: 15px;
- font-size: 13px;
- line-height: 24px;
- display: inline-block;
- vertical-align: super;
+ float: right;
}
diff --git a/examples/components/theme-configurator/index.vue b/examples/components/theme-configurator/index.vue
index 3740d3af0f3..5ec6a2eff30 100644
--- a/examples/components/theme-configurator/index.vue
+++ b/examples/components/theme-configurator/index.vue
@@ -4,6 +4,7 @@
round
type="primary"
size="mini"
+ style="background: #66b1ff;border-color: #66b1ff"
@click.stop="showConfigurator"
>{{getActionDisplayName("theme-editor")}}
@@ -23,7 +24,8 @@
-
{{getActionDisplayName("no-config")}}
+
{{getActionDisplayName("no-config")}}
+
{{getActionDisplayName("no-need-config")}}
@@ -100,8 +102,16 @@ import {
} from './utils/utils.js';
import DocStyle from './docStyle';
import Loading from './loading';
+import Shortcut from './shortcut';
import DownloadArea from './download';
+const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';
+
+const DEFAULT_USER_CONFIG = {
+ global: {},
+ local: {}
+};
+
export default {
components: {
mainPanel,
@@ -117,21 +127,33 @@ export default {
global: {},
local: {}
},
- lastApply: 0
+ lastApply: 0,
+ userConfigHistory: [],
+ userConfigRedoHistory: [],
+ hasLocalConfig: false
};
},
- mixins: [DocStyle, Loading],
+ mixins: [DocStyle, Loading, Shortcut],
computed: {
globalValue() {
return filterGlobalValue(this.defaultConfig, this.userConfig);
+ },
+ pageCouldEdit() {
+ const noNeedEdit = ['installation', 'quickstart', 'i18n', 'custom-theme', 'transition'];
+ const lastPath = this.$route.path.split('/').slice(-1).pop();
+ return noNeedEdit.indexOf(lastPath) < 0;
}
},
+ mounted() {
+ this.checkLocalThemeConfig();
+ },
methods: {
getActionDisplayName(key) {
return getActionDisplayName(key);
},
showConfigurator() {
this.visible = !this.visible;
+ this.visible ? this.enableShortcut() : this.disableShortcut();
bus.$emit('user-theme-config-visible', this.visible);
window.userThemeConfigVisible = Boolean(this.visible);
if (this.init) return;
@@ -154,25 +176,46 @@ export default {
this.defaultConfig = defaultConfig;
this.filterCurrentConfig();
this.init = true;
+ this.checkLocalThemeConfig();
}
loading.close();
}, 300); // action after transition
});
});
},
+ checkLocalThemeConfig() {
+ try {
+ if (this.hasLocalConfig) {
+ this.$message(getActionDisplayName('load-local-theme-config'));
+ this.onAction();
+ return;
+ }
+ const config = JSON.parse(localStorage.getItem(ELEMENT_THEME_USER_CONFIG));
+ if (config && config.global) {
+ this.userConfig = config;
+ this.hasLocalConfig = true;
+ this.showConfigurator();
+ }
+ } catch (e) {
+ // bad local config
+ }
+ },
filterCurrentConfig() {
this.currentConfig = this.defaultConfig.find((config) => {
- return config.name === this.$route.path.split('/').pop().toLowerCase();
+ return config.name === this.$route.path.split('/').pop().toLowerCase().replace('-', '');
});
},
userConfigChange(e) {
+ this.userConfigHistory.push(JSON.stringify(this.userConfig));
+ this.userConfigRedoHistory = [];
this.$set(this.userConfig[filterConfigType(this.currentConfig.name)], e.key, e.value);
this.onAction();
},
applyStyle(res, time) {
if (time < this.lastApply) return;
- this.updateDocs();
- updateDomHeadStyle('chalk-style', res);
+ this.updateDocs(() => {
+ updateDomHeadStyle('chalk-style', res);
+ });
this.lastApply = time;
},
onDownload() {
@@ -190,6 +233,12 @@ export default {
onAction() {
this.triggerComponentLoading(true);
const time = +new Date();
+ const currentConfigString = JSON.stringify(this.userConfig);
+ if (JSON.stringify(DEFAULT_USER_CONFIG) === currentConfigString) {
+ localStorage.removeItem(ELEMENT_THEME_USER_CONFIG);
+ } else {
+ localStorage.setItem(ELEMENT_THEME_USER_CONFIG, currentConfigString);
+ }
updateVars(this.userConfig)
.then((res) => {
this.applyStyle(res, time);
@@ -213,10 +262,24 @@ export default {
triggerComponentLoading(val) {
bus.$emit('user-theme-config-loading', val);
},
- updateDocs() {
+ updateDocs(cb) {
window.userThemeConfig = JSON.parse(JSON.stringify(this.userConfig));
bus.$emit('user-theme-config-update', this.userConfig);
- this.updateDocStyle(this.userConfig);
+ this.updateDocStyle(this.userConfig, cb);
+ },
+ undo() {
+ if (this.userConfigHistory.length > 0) {
+ this.userConfigRedoHistory.push(JSON.stringify(this.userConfig));
+ this.userConfig = JSON.parse(this.userConfigHistory.pop());
+ this.onAction();
+ }
+ },
+ redo() {
+ if (this.userConfigRedoHistory.length > 0) {
+ this.userConfigHistory.push(JSON.stringify(this.userConfig));
+ this.userConfig = JSON.parse(this.userConfigRedoHistory.shift());
+ this.onAction();
+ }
}
},
watch: {
diff --git a/examples/components/theme-configurator/shortcut.vue b/examples/components/theme-configurator/shortcut.vue
new file mode 100644
index 00000000000..7a77098d8af
--- /dev/null
+++ b/examples/components/theme-configurator/shortcut.vue
@@ -0,0 +1,27 @@
+
+
\ No newline at end of file
diff --git a/examples/components/theme-configurator/utils/utils.js b/examples/components/theme-configurator/utils/utils.js
index d1b87e90be0..7f1ae91f3f6 100644
--- a/examples/components/theme-configurator/utils/utils.js
+++ b/examples/components/theme-configurator/utils/utils.js
@@ -46,12 +46,14 @@ const getNameFromI18N = (name) => {
return constant.filter(config => config.lang === lang)[0][name];
};
+export const getVariableDisplayName = (key) => {
+ return getNameFromI18N('variable-name')[key] || key;
+};
+
export const getStyleDisplayName = (config, componentName) => {
const displayNameMap = getNameFromI18N('display-name');
- if (config.name !== '[]') {
- const langIndex = {'zh-CN': '0', 'es': 2, 'fr-FR': 3}[getLang()] || 1;
- const nameArr = config.name.replace(/\[?\]?/g, '').split(',');
- return nameArr[langIndex] || nameArr[1];
+ if (config.name) {
+ return getVariableDisplayName(config.key.replace('$--', ''));
}
let displayName = config.key.replace(`$--${componentName}-`, '').replace();
Object.keys(displayNameMap).forEach((name) => {
diff --git a/examples/i18n/theme-editor.json b/examples/i18n/theme-editor.json
index d145dd24877..72bca951d58 100644
--- a/examples/i18n/theme-editor.json
+++ b/examples/i18n/theme-editor.json
@@ -9,11 +9,29 @@
"font-size": "文字大小",
"font-line-height": "文字行高",
"border-radius": "边框圆角",
+ "vertical": "纵向",
+ "horizontal": "横向",
+ "padding": "内间距",
+ "margin": "外间距",
+ "icon": "图标",
+ "placeholder": "占位符",
+ "dropdown": "下拉菜单",
+ "max": "最大",
+ "min": "最小",
+ "focus": "聚焦",
+ "selected": "选中",
+ "height": "高度",
+ "size": "大小",
+ "group": "分组",
+ "radius": "圆角",
+ "width": "宽度",
"color": "颜色"
},
"action": {
"theme-editor": "主题编辑器",
"no-config": "暂不可编辑,敬请期待",
+ "no-need-config": "本页无需编辑,看看其他页面吧",
+ "load-local-theme-config": "正在恢复您上次自定义的主题",
"reset-theme": "重置",
"download-theme": "下载"
},
@@ -29,13 +47,82 @@
"Font": "文字",
"Radius": "边框圆角",
"Shadow": "阴影",
+ "Spacing": "间距",
"FontSize": "文字大小",
"FontWeight": "文字粗细",
"LineHeight": "文字行高"
+ },
+ "variable-name" : {
+ "color-primary": "主题色",
+ "color-white": "基础白色",
+ "color-black": "基础黑色",
+ "color-success": "成功颜色",
+ "color-warning": "警告颜色",
+ "color-danger": "危险颜色",
+ "color-info": "信息颜色",
+ "color-text-primary": "主要文字颜色",
+ "color-text-regular": "常规文字颜色",
+ "color-text-secondary": "次要文字颜色",
+ "color-text-placeholder": "占位文字颜色",
+ "border-color-base": "一级边框颜色",
+ "border-color-light": "二级边框颜色",
+ "border-color-lighter": "三级边框颜色",
+ "border-color-extra-light": "四级边框颜色",
+ "background-color-base": "基础背景色",
+ "border-radius-base": "大圆角",
+ "border-radius-small": "小圆角",
+ "border-radius-circle": "圆形圆角",
+ "box-shadow-base": "基础投影",
+ "box-shadow-dark": "深色投影",
+ "box-shadow-light": "浅色投影",
+ "font-size-extra-large": "主标题文字大小",
+ "font-size-large": "标题文字大小",
+ "font-size-medium": "小标题文字大小",
+ "font-size-base": "正文文字大小",
+ "font-size-small": "正文(小)文字大小",
+ "font-size-extra-small": "辅助文字大小",
+ "font-weight-primary": "主要文字粗细",
+ "font-weight-secondary": "次要文字粗细",
+ "font-line-height-primary": "主要文字行高",
+ "font-line-height-secondary": "次要文字行高"
}
},
{
"lang": "en-US",
+ "variable-name" : {
+ "color-primary": "primary color",
+ "color-white": "basic white",
+ "color-black": "basic black",
+ "color-success": "success color",
+ "color-warning": "warning color",
+ "color-danger": "danger color",
+ "color-info": "info color",
+ "color-text-primary": "primary text color",
+ "color-text-regular": "regular text color",
+ "color-text-secondary": "secondary text color",
+ "color-text-placeholder": "placeholder text color",
+ "border-color-base": "border color base",
+ "border-color-light": "border color light",
+ "border-color-lighter": "border color lighter",
+ "border-color-extra-light": "border color extra light",
+ "background-color-base": "base background color",
+ "border-radius-base": "border radius base",
+ "border-radius-small": "border radius small",
+ "border-radius-circle": "border radius circle",
+ "box-shadow-base": "box shadow base",
+ "box-shadow-dark": "box shadow dark",
+ "box-shadow-light": "box shadow light",
+ "font-size-extra-large": "extra large font size",
+ "font-size-large": "large font size",
+ "font-size-medium": "medium font size",
+ "font-size-base": "base font size",
+ "font-size-small": "small font size",
+ "font-size-extra-small": "extra small font size",
+ "font-weight-primary": "primary font weight",
+ "font-weight-secondary": "secondary font weight",
+ "font-line-height-primary": "primary font line height",
+ "font-line-height-secondary": "secondary font line height"
+ },
"display-name": {
"border-color": "border color",
"font-color": "font color",
@@ -48,6 +135,8 @@
"action": {
"theme-editor": "Theme Editor",
"no-config": "Please stay tuned",
+ "load-local-theme-config": "Loading your last edit theme config",
+ "no-need-config": "No config in this page",
"reset-theme": "Reset",
"download-theme": "Download"
},
@@ -65,11 +154,61 @@
{
"lang": "es",
"display-name": {
+ "border-color": "border color",
+ "font-color": "font color",
+ "background-color": "background color",
+ "font-weight": "font weight",
+ "font-size": "font size",
+ "font-line-height": "font line height",
+ "border-radius": "border radius"
+ },
+ "action": {
+ "theme-editor": "Theme Editor",
+ "no-config": "Please stay tuned",
+ "load-local-theme-config": "Loading your last edit theme config",
+ "no-need-config": "No config in this page",
+ "reset-theme": "Reset",
+ "download-theme": "Download"
+ },
+ "category": {
+ "BrandColor": "Brand Color",
+ "SecondaryColor": "Secondary Color",
+ "FontColor": "Font Color",
+ "BorderColor": "Border Color",
+ "BackgroundColor": "Background Color",
+ "FontSize": "Font Size",
+ "FontWeight": "Font Weight",
+ "LineHeight": "Line Height"
}
},
{
"lang": "fr-FR",
"display-name": {
+ "border-color": "border color",
+ "font-color": "font color",
+ "background-color": "background color",
+ "font-weight": "font weight",
+ "font-size": "font size",
+ "font-line-height": "font line height",
+ "border-radius": "border radius"
+ },
+ "action": {
+ "theme-editor": "Theme Editor",
+ "no-config": "Please stay tuned",
+ "load-local-theme-config": "Loading your last edit theme config",
+ "no-need-config": "No config in this page",
+ "reset-theme": "Reset",
+ "download-theme": "Download"
+ },
+ "category": {
+ "BrandColor": "Brand Color",
+ "SecondaryColor": "Secondary Color",
+ "FontColor": "Font Color",
+ "BorderColor": "Border Color",
+ "BackgroundColor": "Background Color",
+ "FontSize": "Font Size",
+ "FontWeight": "Font Weight",
+ "LineHeight": "Line Height"
}
}
]
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index 451fec4f483..485d5f4f433 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -51,7 +51,7 @@
top: 0;
height: 100%;
padding: 0 25px 0 15px;
- color: $--input-color;
+ color: $--cascader-menu-font-color;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
@@ -156,7 +156,7 @@
}
@include when(active) {
- color: $--select-option-selected;
+ color: $--cascader-menu-selected-font-color;
}
&:hover, &:focus:not(:active) {
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index a6a76e81083..143671ef155 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -4,7 +4,7 @@
@import "mixins/utils";
@include b(checkbox) {
- color: $--checkbox-color;
+ color: $--checkbox-font-color;
font-weight: $--checkbox-font-weight;
font-size: $--font-size-base;
position: relative;
@@ -149,7 +149,7 @@
@include when(checked) {
.el-checkbox__inner {
- background-color: $--checkbox-checked-input-fill;
+ background-color: $--checkbox-checked-input-background-color;
border-color: $--checkbox-checked-input-border-color;
&::after {
@@ -158,7 +158,7 @@
}
& + .el-checkbox__label {
- color: $--checkbox-checked-text-color;
+ color: $--checkbox-checked-font-color;
}
}
@include when(focus) { /*focus时 视觉上区分*/
@@ -168,7 +168,7 @@
}
@include when(indeterminate) {
.el-checkbox__inner {
- background-color: $--checkbox-checked-input-fill;
+ background-color: $--checkbox-checked-input-background-color;
border-color: $--checkbox-checked-input-border-color;
&::before {
@@ -197,7 +197,7 @@
box-sizing: border-box;
width: $--checkbox-input-width;
height: $--checkbox-input-height;
- background-color: $--checkbox-input-fill;
+ background-color: $--checkbox-input-background-color;
z-index: $--index-normal;
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
background-color .25s cubic-bezier(.71,-.46,.29,1.46);
@@ -294,8 +294,8 @@
&.is-checked {
& .el-checkbox-button__inner {
- color: $--checkbox-button-checked-color;
- background-color: $--checkbox-button-checked-fill;
+ color: $--checkbox-button-checked-font-color;
+ background-color: $--checkbox-button-checked-background-color;
border-color: $--checkbox-button-checked-border-color;
box-shadow: -1px 0 0 0 $--color-primary-light-4;
}
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 1952b8292df..5a4cee0ec3b 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1,7 +1,8 @@
/* Element Chalk Variables */
// Special comment for theme configurator
-// type|[Chinese Name, English Name, Spanish Name, French Name]|Category|Order
+// type|skipAutoTranslation|Category|Order
+// skipAutoTranslation 1
/* Transition
-------------------------- */
@@ -14,11 +15,11 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
/* Color
-------------------------- */
-/// color|[主题色,primary color,color primario]|BrandColor|0
+/// color|1|BrandColor|0
$--color-primary: #409EFF !default;
-/// color|[基础白色,basic white,basic white]|BackgroundColor|4
+/// color|1|BackgroundColor|4
$--color-white: #FFFFFF !default;
-/// color|[基础黑色,basic black,basic black]|BackgroundColor|4
+/// color|1|BackgroundColor|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
@@ -29,13 +30,13 @@ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
-/// color|[成功颜色,success color,success color]|SecondaryColor|1
+/// color|1|SecondaryColor|1
$--color-success: #67C23A !default;
-/// color|[警告颜色,warning color,warning color]|SecondaryColor|1
+/// color|1|SecondaryColor|1
$--color-warning: #E6A23C !default;
-/// color|[危险颜色,danger color,danger color]|SecondaryColor|1
+/// color|1|SecondaryColor|1
$--color-danger: #F56C6C !default;
-/// color|[信息颜色,info color,info color]|SecondaryColor|1
+/// color|1|SecondaryColor|1
$--color-info: #909399 !default;
$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
@@ -47,25 +48,25 @@ $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
-/// color|[主要文字颜色,primary text color,primary text color]|FontColor|2
+/// color|1|FontColor|2
$--color-text-primary: #303133 !default;
-/// color|[常规文字颜色,regular text color,regular text color]|FontColor|2
+/// color|1|FontColor|2
$--color-text-regular: #606266 !default;
-/// color|[次要文字颜色,secondary text color,secondary text color]|FontColor|2
+/// color|1|FontColor|2
$--color-text-secondary: #909399 !default;
-/// color|[占位文字颜色,placeholder text color,placeholder text color]|FontColor|2
+/// color|1|FontColor|2
$--color-text-placeholder: #C0C4CC !default;
-/// color|[一级边框颜色,border color,border color]|BorderColor|3
+/// color|1|BorderColor|3
$--border-color-base: #DCDFE6 !default;
-/// color|[二级边框颜色,border color light,border color light]|BorderColor|3
+/// color|1|BorderColor|3
$--border-color-light: #E4E7ED !default;
-/// color|[三级边框颜色,border color lighter,border color lighter]|BorderColor|3
+/// color|1|BorderColor|3
$--border-color-lighter: #EBEEF5 !default;
-/// color|[四级边框颜色,border color extra light,border color extra light]|BorderColor|3
+/// color|1|BorderColor|3
$--border-color-extra-light: #F2F6FC !default;
// Background
-/// color|[基础背景色,base background color,base background color]|BackgroundColor|4
+/// color|1|BackgroundColor|4
$--background-color-base: #f5f7fa !default;
/* Link
@@ -79,19 +80,19 @@ $--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
-/// borderRadius|[大圆角,border radius base,border radius base]|Radius|0
+/// borderRadius|1|Radius|0
$--border-radius-base: 4px !default;
-/// borderRadius|[小圆角,border radius small,border radius small]|Radius|0
+/// borderRadius|1|Radius|0
$--border-radius-small: 2px !default;
-/// borderRadius|[圆形圆角,border radius circle,border radius circle]|Radius|0
+/// borderRadius|1|Radius|0
$--border-radius-circle: 100% !default;
// Box-shadow
-/// boxShadow|[基础投影,box shadow base,box shadow base]|Shadow|1
+/// boxShadow|1|Shadow|1
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
-// boxShadow|[深色投影,box shadow,box shadow]|Shadow|1
+// boxShadow|1|Shadow|1
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
-/// boxShadow|[浅色投影,box shadow,box shadow]|Shadow|1
+/// boxShadow|1|Shadow|1
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
/* Fill
@@ -101,25 +102,25 @@ $--fill-base: $--color-white !default;
/* Typography
-------------------------- */
$--font-path: 'fonts' !default;
-/// fontSize|[主标题文字大小,Extra large font size,Extra large font size]|FontSize|0
+/// fontSize|1|FontSize|0
$--font-size-extra-large: 20px !default;
-/// fontSize|[标题文字大小,large font size,large font size]|FontSize|0
+/// fontSize|1|FontSize|0
$--font-size-large: 18px !default;
-/// fontSize|[小标题文字大小,Medium font size,Medium font size]|FontSize|0
+/// fontSize|1|FontSize|0
$--font-size-medium: 16px !default;
-/// fontSize|[正文文字大小,base font size,base font size]|FontSize|0
+/// fontSize|1|FontSize|0
$--font-size-base: 14px !default;
-/// fontSize|[正文(小)文字大小,small font size,small font size]|FontSize|0
+/// fontSize|1|FontSize|0
$--font-size-small: 13px !default;
-/// fontSize|[辅助文字大小,Extra small font size,Extra small font size]|FontSize|0
+/// fontSize|1|FontSize|0
$--font-size-extra-small: 12px !default;
-/// fontWeight|[主要文字粗细,primary font weight,primary font weight]|FontWeight|1
+/// fontWeight|1|FontWeight|1
$--font-weight-primary: 500 !default;
-/// fontWeight|[次要文字粗细,secondary font weight,secondary font weight]|FontWeight|1
+/// fontWeight|1|FontWeight|1
$--font-weight-secondary: 100 !default;
-/// fontLineHeight|[主要文字行高,primary font line height,primary font line height]|LineHeight|2
+/// fontLineHeight|1|LineHeight|2
$--font-line-height-primary: 24px !default;
-/// fontLineHeight|[次要文字行高,secondary font line height,secondary font line height]|LineHeight|2
+/// fontLineHeight|1|LineHeight|2
$--font-line-height-secondary: 16px !default;
$--font-color-disabled-base: #bbb !default;
/* Size
@@ -145,17 +146,25 @@ $--icon-color-base: $--color-info !default;
/* Checkbox
-------------------------- */
+/// fontSize||Font|1
$--checkbox-font-size: 14px !default;
+/// fontWeight||Font|1
$--checkbox-font-weight: $--font-weight-primary !default;
-$--checkbox-color: $--color-text-regular !default;
+/// color||Color|0
+$--checkbox-font-color: $--color-text-regular !default;
$--checkbox-input-height: 14px !default;
$--checkbox-input-width: 14px !default;
+/// borderRadius||Border|2
$--checkbox-input-border-radius: $--border-radius-small !default;
-$--checkbox-input-fill: $--color-white !default;
+/// color||Color|0
+$--checkbox-input-background-color: $--color-white !default;
$--checkbox-input-border: $--border-base !default;
+/// color||Color|0
$--checkbox-input-border-color: $--border-color-base !default;
+/// color||Color|0
$--checkbox-icon-color: $--color-white !default;
+/// color||Color|0
$--checkbox-disabled-input-border-color: $--border-color-base !default;
$--checkbox-disabled-input-fill: #edf2fc !default;
$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
@@ -164,53 +173,66 @@ $--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
-$--checkbox-checked-text-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-checked-font-color: $--color-primary !default;
$--checkbox-checked-input-border-color: $--color-primary !default;
-$--checkbox-checked-input-fill: $--color-primary !default;
+/// color||Color|0
+$--checkbox-checked-input-background-color: $--color-primary !default;
$--checkbox-checked-icon-color: $--fill-base !default;
$--checkbox-input-border-color-hover: $--color-primary !default;
-
+/// height||Other|4
$--checkbox-bordered-height: 40px !default;
+/// padding||Spacing|3
$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
+/// padding||Spacing|3
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
+/// padding||Spacing|3
$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+/// padding||Spacing|3
$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
$--checkbox-bordered-medium-input-height: 14px !default;
$--checkbox-bordered-medium-input-width: 14px !default;
+/// height||Other|4
$--checkbox-bordered-medium-height: 36px !default;
$--checkbox-bordered-small-input-height: 12px !default;
$--checkbox-bordered-small-input-width: 12px !default;
+/// height||Other|4
$--checkbox-bordered-small-height: 32px !default;
$--checkbox-bordered-mini-input-height: 12px !default;
$--checkbox-bordered-mini-input-width: 12px !default;
+/// height||Other|4
$--checkbox-bordered-mini-height: 28px !default;
+/// fontSize||Font|1
$--checkbox-button-font-size: $--font-size-base !default;
-$--checkbox-button-checked-fill: $--color-primary !default;
-$--checkbox-button-checked-color: $--color-white !default;
+/// color||Color|0
+$--checkbox-button-checked-background-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-button-checked-font-color: $--color-white !default;
+/// color||Color|0
$--checkbox-button-checked-border-color: $--color-primary !default;
/* Radio
-------------------------- */
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
$--radio-font-size: $--font-size-base !default;
-/// fontWeight|[]|Font|1
+/// fontWeight||Font|1
$--radio-font-weight: $--font-weight-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-font-color: $--color-text-regular !default;
$--radio-input-height: 14px !default;
$--radio-input-width: 14px !default;
-/// borderRadius|[]|Border|2
+/// borderRadius||Border|2
$--radio-input-border-radius: $--border-radius-circle !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-input-background-color: $--color-white !default;
$--radio-input-border: $--border-base !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-input-border-color: $--border-color-base !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-icon-color: $--color-white !default;
$--radio-disabled-input-border-color: $--disabled-border-base !default;
@@ -221,13 +243,13 @@ $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-checked-font-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-checked-input-border-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-checked-input-background-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-checked-icon-color: $--color-primary !default;
$--radio-input-border-color-hover: $--color-primary !default;
@@ -247,13 +269,13 @@ $--radio-bordered-mini-input-height: 12px !default;
$--radio-bordered-mini-input-width: 12px !default;
$--radio-bordered-mini-height: 28px !default;
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
$--radio-button-font-size: $--font-size-base !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-button-checked-background-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-button-checked-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--radio-button-checked-border-color: $--color-primary !default;
$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
@@ -261,30 +283,38 @@ $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
-------------------------- */
$--select-border-color-hover: $--border-color-hover !default;
$--select-disabled-border: $--disabled-border-base !default;
+/// fontSize||Font|1
$--select-font-size: $--font-size-base !default;
$--select-close-hover-color: $--color-text-secondary !default;
$--select-input-color: $--color-text-placeholder !default;
$--select-multiple-input-color: #666 !default;
-$--select-input-focus-background: $--color-primary !default;
+/// color||Color|0
+$--select-input-focus-border-color: $--color-primary !default;
+/// fontSize||Font|1
$--select-input-font-size: 14px !default;
$--select-option-color: $--color-text-regular !default;
$--select-option-disabled-color: $--color-text-placeholder !default;
$--select-option-disabled-background: $--color-white !default;
+/// height||Other|4
$--select-option-height: 34px !default;
$--select-option-hover-background: $--background-color-base !default;
-$--select-option-selected: $--color-primary !default;
+/// color||Color|0
+$--select-option-selected-font-color: $--color-primary !default;
$--select-option-selected-hover: $--background-color-base !default;
$--select-group-color: $--color-info !default;
+/// height||Other|4
$--select-group-height: 30px !default;
$--select-group-font-size: 12px !default;
$--select-dropdown-background: $--color-white !default;
$--select-dropdown-shadow: $--box-shadow-light !default;
$--select-dropdown-empty-color: #999 !default;
+/// height||Other|4
$--select-dropdown-max-height: 274px !default;
+/// padding||Spacing|3
$--select-dropdown-padding: 6px 0 !default;
$--select-dropdown-empty-padding: 10px 0 !default;
$--select-dropdown-border: solid 1px $--border-color-light !default;
@@ -362,18 +392,26 @@ $--notification-danger-color: $--color-danger !default;
/* Input
-------------------------- */
+/// fontSize||Font|1
$--input-font-size: $--font-size-base !default;
-$--input-color: $--color-text-regular !default;
+/// color||Color|0
+$--input-font-color: $--color-text-regular !default;
+/// height||Other|4
$--input-width: 140px !default;
+/// height||Other|4
$--input-height: 40px !default;
$--input-border: $--border-base !default;
$--input-border-color: $--border-color-base !default;
+/// borderRadius||Border|2
$--input-border-radius: $--border-radius-base !default;
$--input-border-color-hover: $--border-color-hover !default;
-$--input-fill: $--color-white !default;
+/// color||Color|0
+$--input-background-color: $--color-white !default;
$--input-fill-disabled: $--disabled-fill-base !default;
$--input-color-disabled: $--font-color-disabled-base !default;
+/// color||Color|0
$--input-icon-color: $--color-text-placeholder !default;
+/// color||Color|0
$--input-placeholder-color: $--color-text-placeholder !default;
$--input-max-width: 314px !default;
@@ -388,21 +426,32 @@ $--input-disabled-border: $--disabled-border-base !default;
$--input-disabled-color: $--disabled-color-base !default;
$--input-disabled-placeholder-color: $--color-text-placeholder !default;
+/// fontSize||Font|1
$--input-medium-font-size: 14px !default;
+/// height||Other|4
$--input-medium-height: 36px !default;
-
+/// fontSize||Font|1
$--input-small-font-size: 13px !default;
+/// height||Other|4
$--input-small-height: 32px !default;
-
+/// fontSize||Font|1
$--input-mini-font-size: 12px !default;
+/// height||Other|4
$--input-mini-height: 28px !default;
/* Cascader
-------------------------- */
+/// color||Color|0
+$--cascader-menu-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--cascader-menu-selected-font-color: $--color-primary !default;
$--cascader-menu-fill: $--fill-base !default;
+/// fontSize||Font|1
$--cascader-menu-font-size: $--font-size-base !default;
+/// borderRadius||Border|2
$--cascader-menu-radius: $--border-radius-base !default;
$--cascader-menu-border: $--border-base !default;
+/// color||Color|0
$--cascader-menu-border-color: $--border-color-base !default;
$--cascader-menu-border-width: $--border-width-base !default;
$--cascader-menu-color: $--color-text-regular !default;
@@ -413,6 +462,7 @@ $--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
$--cascader-menu-option-color-disabled: #999 !default;
$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
$--cascader-menu-option-empty-color: #666 !default;
+/// color||Color|0
$--cascader-menu-group-color: #999 !default;
$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
$--cascader-menu-option-pinyin-color: #999 !default;
@@ -442,76 +492,84 @@ $--tab-vertical-header-count-fill: $--color-text-secondary !default;
/* Button
-------------------------- */
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
$--button-font-size: $--font-size-base !default;
-/// fontWeight|[]|Font|1
+/// fontWeight||Font|1
$--button-font-weight: $--font-weight-primary !default;
-/// borderRadius|[]|Border|2
+/// borderRadius||Border|2
$--button-border-radius: $--border-radius-base !default;
+/// padding||Spacing|3
$--button-padding-vertical: 12px !default;
+/// padding||Spacing|3
$--button-padding-horizontal: 20px !default;
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
$--button-medium-font-size: $--font-size-base !default;
-/// borderRadius|[]|Border|2
+/// borderRadius||Border|2
$--button-medium-border-radius: $--border-radius-base !default;
+/// padding||Spacing|3
$--button-medium-padding-vertical: 10px !default;
+/// padding||Spacing|3
$--button-medium-padding-horizontal: 20px !default;
-/// fontSize|[]|Font|1
+/// fontSize||Font|1
$--button-small-font-size: 12px !default;
$--button-small-border-radius: #{$--border-radius-base - 1} !default;
+/// padding||Spacing|3
$--button-small-padding-vertical: 9px !default;
+/// padding||Spacing|3
$--button-small-padding-horizontal: 15px !default;
-
+/// fontSize||Font|1
$--button-mini-font-size: 12px !default;
$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
+/// padding||Spacing|3
$--button-mini-padding-vertical: 7px !default;
+/// padding||Spacing|3
$--button-mini-padding-horizontal: 15px !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-default-font-color: $--color-text-regular !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-default-background-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-default-border-color: $--border-color-base !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-disabled-font-color: $--color-text-placeholder !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-disabled-background-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-disabled-border-color: $--border-color-lighter !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-primary-border-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-primary-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-primary-background-color: $--color-primary !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-success-border-color: $--color-success !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-success-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-success-background-color: $--color-success !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-warning-border-color: $--color-warning !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-warning-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-warning-background-color: $--color-warning !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-danger-border-color: $--color-danger !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-danger-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-danger-background-color: $--color-danger !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-info-border-color: $--color-info !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-info-font-color: $--color-white !default;
-/// color|[]|Color|0
+/// color||Color|0
$--button-info-background-color: $--color-info !default;
$--button-hover-tint-percent: 20% !default;
@@ -524,15 +582,21 @@ $--cascader-height: 200px !default;
/* Switch
-------------------------- */
+/// color||Color|0
$--switch-on-color: $--color-primary !default;
+/// color||Color|0
$--switch-off-color: $--border-color-base !default;
+/// color||Color|0
$--switch-disabled-color: $--border-color-lighter !default;
-$--switch-disabled-text-color: $--color-text-placeholder !default;
-
+/// fontSize||Font|1
$--switch-font-size: $--font-size-base !default;
+/// borderRadius||Border|2
$--switch-core-border-radius: 10px !default;
+/// height||Other|4
$--switch-width: 40px !default;
+/// height||Other|4
$--switch-height: 20px !default;
+/// height||Other|4
$--switch-button-size: 16px !default;
/* Dialog
@@ -542,20 +606,24 @@ $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
$--dialog-close-hover-color: $--color-primary !default;
$--dialog-title-font-size: $--font-size-large !default;
$--dialog-font-size: 14px !default;
-/// fontLineHeight|[]
+/// fontLineHeight|
$--dialog-font-line-height: $--font-line-height-primary !default;
$--dialog-padding-primary: 20px !default;
/* Table
-------------------------- */
+/// color||Color|0
$--table-border-color: $--border-color-lighter !default;
$--table-border: 1px solid $--table-border-color !default;
-$--table-text-color: $--color-text-regular !default;
+/// color||Color|0
+$--table-font-color: $--color-text-regular !default;
+/// color||Color|0
$--table-header-color: $--color-text-secondary !default;
-$--table-row-hover-background: $--background-color-base !default;
-$--table-current-row-background: $--color-primary-light-9 !default;
-$--table-header-background: $--color-white !default;
-$--table-footer-background: $--color-text-placeholder !default;
+/// color||Color|0
+$--table-row-hover-background-color: $--background-color-base !default;
+$--table-current-row-background-color: $--color-primary-light-9 !default;
+/// color||Color|0
+$--table-header-background-color: $--color-white !default;
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
/* Pagination
@@ -596,8 +664,12 @@ $--tooltip-padding: 10px !default;
-------------------------- */
$--tag-padding: 0 10px !default;
$--tag-fill: rgba($--color-primary, 0.10) !default;
-$--tag-color: $--color-primary !default;
+/// color||Color|0
+$--tag-font-color: $--color-primary !default;
+/// color||Color|0
+$--tag-background-color: $--color-primary !default;
$--tag-border: rgba($--color-primary, 0.20) !default;
+/// fontSize||Font|1
$--tag-font-size: 12px !default;
$--tag-border-radius: 4px !default;
@@ -623,8 +695,11 @@ $--tag-danger-color: $--color-danger !default;
/* Tree
-------------------------- */
-$--tree-node-hover-color: $--background-color-base !default;
-$--tree-text-color: $--color-text-regular !default;
+/// color||Color|0
+$--tree-node-hover-background-color: $--background-color-base !default;
+/// color||Color|0
+$--tree-font-color: $--color-text-regular !default;
+/// color||Color|0
$--tree-expand-icon-color: $--color-text-placeholder !default;
/* Dropdown
@@ -649,15 +724,22 @@ $--card-padding: 20px !default;
/* Slider
--------------------------*/
+/// color||Color|0
$--slider-main-background-color: $--color-primary !default;
+/// color||Color|0
$--slider-runway-background-color: $--border-color-light !default;
$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
+/// color||Color|0
$--slider-stop-background-color: $--color-white !default;
+/// color||Color|0
$--slider-disable-color: $--color-text-placeholder !default;
+/// margin||Spacing|3
$--slider-margin: 16px 0 !default;
$--slider-border-radius: 3px !default;
+/// height||Other|4
$--slider-height: 6px !default;
+/// height||Other|4
$--slider-button-size: 16px !default;
$--slider-button-wrapper-size: 36px !default;
$--slider-button-wrapper-offset: -15px !default;
@@ -677,23 +759,35 @@ $--menu-item-hover-fill: $--color-primary-light-9 !default;
/* Rate
--------------------------*/
+/// height||Other|3
$--rate-height: 20px !default;
+/// fontSize||Font|1
$--rate-font-size: $--font-size-base !default;
+/// height||Other|3
$--rate-icon-size: 18px !default;
+/// margin||Spacing|2
$--rate-icon-margin: 6px !default;
+/// color||Color|0
$--rate-icon-color: $--color-text-placeholder !default;
/* DatePicker
--------------------------*/
-$--datepicker-color: $--color-text-regular !default;
-$--datepicker-off-color: $--color-text-placeholder !default;
-$--datepicker-header-color: $--color-text-regular !default;
+/// color||Color|0
+$--datepicker-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--datepicker-off-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--datepicker-header-font-color: $--color-text-regular !default;
$--datepicker-icon-color: $--color-text-primary !default;
$--datepicker-border-color: $--disabled-border-base !default;
$--datepicker-inner-border-color: #e4e4e4 !default;
+/// color||Color|0
$--datepicker-inrange-color: $--border-color-extra-light !default;
+/// color||Color|0
$--datepicker-inrange-hover-color: $--border-color-extra-light !default;
+/// color||Color|0
$--datepicker-active-color: $--color-primary !default;
+/// color||Color|0
$--datepicker-text-hover-color: $--color-primary !default;
$--datepicker-cell-hover-color: #fff !default;
@@ -735,13 +829,19 @@ $--collapse-content-color: $--color-text-primary !default;
--------------------------*/
$--transfer-border-color: $--border-color-lighter !default;
$--transfer-border-radius: $--border-radius-base !default;
+/// height||Other|4
$--transfer-panel-width: 200px !default;
+/// height||Other|4
$--transfer-panel-header-height: 40px !default;
-$--transfer-panel-header-background: $--background-color-base !default;
+/// color||Color|0
+$--transfer-panel-header-background-color: $--background-color-base !default;
+/// height||Other|4
$--transfer-panel-footer-height: 40px !default;
+/// height||Other|4
$--transfer-panel-body-height: 246px !default;
+/// height||Other|4
$--transfer-item-height: 30px !default;
-$--transfer-item-hover-background: $--color-text-secondary !default;
+/// height||Other|4
$--transfer-filter-height: 32px !default;
/* Header
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index 94bb24a0d85..71b4205e614 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -12,7 +12,7 @@
background-color: $--datepicker-inrange-color;
}
td.available:hover {
- color: $--datepicker-color;
+ color: $--datepicker-font-color;
}
td:first-child div {
margin-left: 5px;
@@ -61,7 +61,7 @@
&.next-month,
&.prev-month {
- color: $--datepicker-off-color;
+ color: $--datepicker-off-font-color;
}
&.today {
@@ -138,13 +138,13 @@
&.week {
font-size: 80%;
- color: $--datepicker-header-color;
+ color: $--datepicker-header-font-color;
}
}
th {
padding: 5px;
- color: $--datepicker-header-color;
+ color: $--datepicker-header-font-color;
font-weight: 400;
border-bottom: solid 1px $--border-color-lighter;
}
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
index ca071d38657..e6ea897ca6a 100644
--- a/packages/theme-chalk/src/date-picker/month-table.scss
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -40,7 +40,7 @@
height: 36px;
display: block;
line-height: 36px;
- color: $--datepicker-color;
+ color: $--datepicker-font-color;
margin: 0 auto;
border-radius: 18px;
&:hover {
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
index 3a8e386a6a0..380d6d1f1ff 100644
--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
@@ -38,7 +38,7 @@
background-color: transparent;
line-height: 28px;
font-size: 14px;
- color: $--datepicker-color;
+ color: $--datepicker-font-color;
padding-left: 12px;
text-align: left;
outline: none;
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index 511e2fa4047..c4ae2e2e47d 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -36,7 +36,7 @@
height: 32px;
display: block;
line-height: 32px;
- color: $--datepicker-color;
+ color: $--datepicker-font-color;
margin: 0 auto;
&:hover {
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index acc8891480b..26b8983a067 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -15,8 +15,8 @@
box-sizing: border-box;
width: 100%;
font-size: inherit;
- color: $--input-color;
- background-color: $--input-fill;
+ color: $--input-font-color;
+ background-color: $--input-background-color;
background-image: none;
border: $--input-border;
border-radius: $--input-border-radius;
@@ -71,12 +71,12 @@
@include e(inner) {
-webkit-appearance: none;
- background-color: $--input-fill;
+ background-color: $--input-background-color;
background-image: none;
border-radius: $--input-border-radius;
border: $--input-border;
box-sizing: border-box;
- color: $--input-color;
+ color: $--input-font-color;
display: inline-block;
font-size: inherit;
height: $--input-height;
diff --git a/packages/theme-chalk/src/option.scss b/packages/theme-chalk/src/option.scss
index f4d023dbf53..ee5a383ee88 100644
--- a/packages/theme-chalk/src/option.scss
+++ b/packages/theme-chalk/src/option.scss
@@ -29,7 +29,7 @@
}
&.selected {
- color: $--select-option-selected;
+ color: $--select-option-selected-font-color;
font-weight: bold;
}
}
diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss
index d6a9135d8af..567b411afe8 100644
--- a/packages/theme-chalk/src/select-dropdown.scss
+++ b/packages/theme-chalk/src/select-dropdown.scss
@@ -14,7 +14,7 @@
@include when(multiple) {
& .el-select-dropdown__item.selected {
- color: $--select-option-selected;
+ color: $--select-option-selected-font-color;
background-color: $--select-dropdown-background;
&.hover {
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index d11dcdca59d..d5f6a30d1ba 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -28,7 +28,7 @@
padding-right: 35px;
&:focus {
- border-color: $--select-input-focus-background;
+ border-color: $--select-input-focus-border-color;
}
}
@@ -69,7 +69,7 @@
}
&.is-focus .el-input__inner {
- border-color: $--select-input-focus-background;
+ border-color: $--select-input-focus-border-color;
}
}
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index f454859d581..031b999cd04 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -13,7 +13,7 @@
max-width: 100%;
background-color: $--color-white;
font-size: 14px;
- color: $--table-text-color;
+ color: $--table-font-color;
// 数据为空
@include e(empty-block) {
@@ -179,7 +179,7 @@
white-space: nowrap;
overflow: hidden;
user-select: none;
- background-color: $--table-header-background;
+ background-color: $--table-header-background-color;
div {
display: inline-block;
@@ -361,8 +361,8 @@
& tbody td {
border-top: $--table-border;
- background-color: $--table-row-hover-background;
- color: $--table-text-color;
+ background-color: $--table-row-hover-background-color;
+ color: $--table-font-color;
}
}
@@ -394,8 +394,8 @@
overflow: hidden;
& tbody td {
- background-color: $--table-row-hover-background;
- color: $--table-text-color;
+ background-color: $--table-row-hover-background-color;
+ color: $--table-font-color;
}
}
@@ -489,7 +489,7 @@
}
&.current-row td {
- background-color: $--table-current-row-background;
+ background-color: $--table-current-row-background-color;
}
}
}
@@ -500,14 +500,14 @@
&, &.el-table__row--striped {
&, &.current-row {
> td {
- background-color: $--table-current-row-background;
+ background-color: $--table-current-row-background-color;
}
}
}
}
tr.current-row > td {
- background-color: $--table-current-row-background;
+ background-color: $--table-current-row-background-color;
}
}
@@ -541,7 +541,7 @@
@include m(enable-row-hover) {
.el-table__body tr:hover > td {
- background-color: $--table-row-hover-background;
+ background-color: $--table-row-hover-background-color;
}
}
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 6c949d7164c..2b6d67b71e7 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -8,7 +8,7 @@
height: 32px;
line-height: 30px;
font-size: $--tag-font-size;
- color: $--tag-color;
+ color: $--tag-font-color;
border-radius: $--tag-border-radius;
box-sizing: border-box;
border: 1px solid $--tag-border;
@@ -26,14 +26,14 @@
vertical-align: middle;
top: -1px;
right: -5px;
- color: $--tag-color;
+ color: $--tag-font-color;
&::before {
display: block;
}
&:hover {
- background-color: $--tag-color;
+ background-color: $--tag-background-color;
color: $--color-white;
}
}
diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
index e231fd05462..3d594c1d670 100644
--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -155,7 +155,7 @@
.el-transfer-panel__header {
height: $--transfer-panel-header-height;
line-height: $--transfer-panel-header-height;
- background: $--transfer-panel-header-background;
+ background: $--transfer-panel-header-background-color;
margin: 0;
padding-left: 15px;
border-bottom: 1px solid $--transfer-border-color;
diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index 8d4591f9ab6..197b84c2e80 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -7,7 +7,7 @@
position: relative;
cursor: default;
background: $--color-white;
- color: $--tree-text-color;
+ color: $--tree-font-color;
@include e(empty-block) {
position: relative;
@@ -39,7 +39,7 @@
outline: none;
&:focus { /* focus */
> .el-tree-node__content {
- background-color: $--tree-node-hover-color;
+ background-color: $--tree-node-hover-background-color;
}
}
@@ -63,7 +63,7 @@
margin-right: 8px;
}
&:hover {
- background-color: $--tree-node-hover-color;
+ background-color: $--tree-node-hover-background-color;
}
.el-tree.is-dragging & {