test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-01 10:47:57 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(style): rename to text-color bg-color (#4468)

Browse Source 
* refactor(style): rename -font to -text-color & -background to -bg-color

* refactor(style): rename bg-color text-color

* refactor(style): rename 'color' to 'text-color'
This commit is contained in:
云游君 2021-11-22 11:19:44 +08:00 committed by GitHub
parent c4dece47e8
commit e68b6c05d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 256 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/.vitepress/vitepress/styles/vars.scss
View File

@ -40,13 +40,13 @@
// code block vars // code block vars
--code-bg-color: var(--el-background-color-base); --code-bg-color: var(--el-bg-color-base);
--code-text-color: var(--text-color); --code-text-color: var(--text-color);
--code-font-family: var(--font-family-mono); --code-font-family: var(--font-family-mono);
// doc search vars // doc search vars
--docsearch-primary-color: var(--brand-color); --docsearch-primary-color: var(--brand-color);
--docsearch-searchbox-background: var(--el-background-color-base); --docsearch-searchbox-background: var(--el-bg-color-base);
} }
:root { :root {

4
docs/en-US/guide/theming.md
View File

@ -191,14 +191,14 @@ Like this:
If you just want to customize a particular component, just add inline styles for certain components individually. If you just want to customize a particular component, just add inline styles for certain components individually.
```html ```html
<el-tag style="--el-tag-background-color: red">Tag</el-tag> <el-tag style="--el-tag-bg-color: red">Tag</el-tag>
``` ```
For performance reasons, it is more recommended to custom css variables under a class rather than the global `:root`. For performance reasons, it is more recommended to custom css variables under a class rather than the global `:root`.
```css ```css
.custom-class { .custom-class {
--el-tag-background-color: red; --el-tag-bg-color: red;
} }
``` ```

4
docs/examples/table/with-status.vue
View File

@ -53,9 +53,9 @@ export default {
<style> <style>
.el-table .warning-row { .el-table .warning-row {
--el-table-tr-background-color: var(--el-color-warning-lighter); --el-table-tr-bg-color: var(--el-color-warning-lighter);
} }
.el-table .success-row { .el-table .success-row {
--el-table-tr-background-color: var(--el-color-success-lighter); --el-table-tr-bg-color: var(--el-color-success-lighter);
} }
</style> </style>

4
packages/components/menu/__tests__/menu.spec.ts
View File

@ -57,7 +57,7 @@ describe('menu', () => {
// const item2 = await wrapper.findComponent({ ref: 'item2' }) // const item2 = await wrapper.findComponent({ ref: 'item2' })
expect( expect(
window.getComputedStyle(instance)._values['--el-menu-background-color'] window.getComputedStyle(instance)._values['--el-menu-bg-color']
).toEqual(backgroundColor) ).toEqual(backgroundColor)
// We can not test final style, so comment it out for now. // We can not test final style, so comment it out for now.
@ -161,7 +161,7 @@ describe('menu', () => {
expect(elSubMenu.vm.$.exposed.opened).toBeTruthy() expect(elSubMenu.vm.$.exposed.opened).toBeTruthy()
}) })
test('hover-background-color', async () => { test('hover-bg-color', async () => {
const wrapper = _mount( const wrapper = _mount(
`<el-menu ref="menu" default-active="2" `<el-menu ref="menu" default-active="2"
:background-color="background" :background-color="background"

4
packages/components/menu/src/use-menu-css-var.ts
View File

@ -8,8 +8,8 @@ export const useMenuCssVar = (props: MenuProps) => {
return { return {
'--el-menu-text-color': props.textColor || '', '--el-menu-text-color': props.textColor || '',
'--el-menu-hover-text-color': props.textColor || '', '--el-menu-hover-text-color': props.textColor || '',
'--el-menu-background-color': props.backgroundColor || '', '--el-menu-bg-color': props.backgroundColor || '',
'--el-menu-hover-background-color': useMenuColor(props).value || '', '--el-menu-hover-bg-color': useMenuColor(props).value || '',
'--el-menu-active-color': props.activeTextColor || '', '--el-menu-active-color': props.activeTextColor || '',
} }
}) })

16
packages/hooks/__tests__/use-css-var.spec.ts
View File

@ -10,8 +10,8 @@ describe('usecssvar', () => {
`, `,
setup() { setup() {
const themeVars = ref({ const themeVars = ref({
'--el-button-default-background-color': '#f44336', '--el-button-default-bg-color': '#f44336',
'--el-button-default-font-color': '#2196f3', '--el-button-default-text-color': '#2196f3',
}) })
useCssVar(themeVars) useCssVar(themeVars)
@ -21,10 +21,10 @@ describe('usecssvar', () => {
const rootElement = window.document.documentElement const rootElement = window.document.documentElement
expect( expect(
rootElement.style.getPropertyValue('--el-button-default-background-color') rootElement.style.getPropertyValue('--el-button-default-bg-color')
).toBe('#f44336') ).toBe('#f44336')
expect( expect(
rootElement.style.getPropertyValue('--el-button-default-font-color') rootElement.style.getPropertyValue('--el-button-default-text-color')
).toBe('#2196f3') ).toBe('#2196f3')
}) })
@ -35,8 +35,8 @@ describe('usecssvar', () => {
`, `,
setup() { setup() {
const themeVars = ref({ const themeVars = ref({
'--el-span-default-background-color': '#f44336', '--el-span-default-bg-color': '#f44336',
'--el-span-default-font-color': '#2196f3', '--el-span-default-text-color': '#2196f3',
}) })
const elRef = ref(null) const elRef = ref(null)
@ -51,10 +51,10 @@ describe('usecssvar', () => {
const customElement = wrapper.find('span').element const customElement = wrapper.find('span').element
expect( expect(
customElement.style.getPropertyValue('--el-span-default-background-color') customElement.style.getPropertyValue('--el-span-default-bg-color')
).toBe('#f44336') ).toBe('#f44336')
expect( expect(
customElement.style.getPropertyValue('--el-span-default-font-color') customElement.style.getPropertyValue('--el-span-default-text-color')
).toBe('#2196f3') ).toBe('#2196f3')
}) })
}) })

4
packages/hooks/use-css-var/index.ts
View File

@ -50,8 +50,8 @@ export const themeVarsKey: InjectionKey<VarsType> = 'themeVars' as any
* ```ts * ```ts
* setup() { * setup() {
* const themeVars = ref({ * const themeVars = ref({
* '--el-button-default-background-color': '#f44336', * '--el-button-default-bg-color': '#f44336',
* '--el-button-default-font-color': '#2196f3', * '--el-button-default-text-color': '#2196f3',
* }) * })
* useCssVar(themeVars) * useCssVar(themeVars)
* } * }

4
packages/theme-chalk/src/alert.scss
View File

@ -41,10 +41,10 @@
@each $type in (success, info, warning, error) { @each $type in (success, info, warning, error) {
@include m($type) { @include m($type) {
--el-alert-background-color: #{map.get($colors, $type, 'light-9')}; --el-alert-bg-color: #{map.get($colors, $type, 'light-9')};
&.is-light { &.is-light {
background-color: var(--el-alert-background-color); background-color: var(--el-alert-bg-color);
color: var(--el-color-#{$type}); color: var(--el-color-#{$type});
.#{$namespace}-alert__description { .#{$namespace}-alert__description {

4
packages/theme-chalk/src/avatar.scss
View File

@ -9,8 +9,8 @@
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
color: var(--el-avatar-font-color); color: var(--el-avatar-text-color);
background: var(--el-avatar-background-color); background: var(--el-avatar-bg-color);
width: var(--el-avatar-large-size); width: var(--el-avatar-large-size);
height: var(--el-avatar-large-size); height: var(--el-avatar-large-size);
line-height: var(--el-avatar-large-size); line-height: var(--el-avatar-large-size);

6
packages/theme-chalk/src/backtop.scss
View File

@ -6,11 +6,11 @@
@include set-component-css-var('backtop', $backtop); @include set-component-css-var('backtop', $backtop);
position: fixed; position: fixed;
background-color: var(--el-backtop-background-color); background-color: var(--el-backtop-bg-color);
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
color: var(--el-backtop-font-color); color: var(--el-backtop-text-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -20,7 +20,7 @@
z-index: 5; z-index: 5;
&:hover { &:hover {
background-color: var(--el-backtop-hover-background-color); background-color: var(--el-backtop-hover-bg-color);
} }
@include e(icon) { @include e(icon) {

2
packages/theme-chalk/src/badge.scss
View File

@ -13,7 +13,7 @@
display: inline-block; display: inline-block;
@include e(content) { @include e(content) {
background-color: var(--el-badge-background-color); background-color: var(--el-badge-bg-color);
border-radius: var(--el-badge-radius); border-radius: var(--el-badge-radius);
color: var(--el-color-white); color: var(--el-color-white);
display: inline-block; display: inline-block;

4
packages/theme-chalk/src/calendar.scss
View File

@ -48,7 +48,7 @@
transition: background-color var(--el-transition-duration-fast) ease; transition: background-color var(--el-transition-duration-fast) ease;
@include when(selected) { @include when(selected) {
background-color: var(--el-calendar-selected-background-color); background-color: var(--el-calendar-selected-bg-color);
} }
@include when(today) { @include when(today) {
@ -74,7 +74,7 @@
height: var(--el-calendar-cell-width); height: var(--el-calendar-cell-width);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: var(--el-calendar-selected-background-color); background-color: var(--el-calendar-selected-bg-color);
} }
} }
} }

2
packages/theme-chalk/src/card.scss
View File

@ -13,7 +13,7 @@
@include b(card) { @include b(card) {
border-radius: var(--el-card-border-radius); border-radius: var(--el-card-border-radius);
border: 1px solid var(--el-card-border-color); border: 1px solid var(--el-card-border-color);
background-color: var(--el-card-background-color); background-color: var(--el-card-bg-color);
overflow: hidden; overflow: hidden;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
transition: var(--el-transition-duration); transition: var(--el-transition-duration);

6
packages/theme-chalk/src/cascader-panel.scss
View File

@ -20,7 +20,7 @@
@include b(cascader-menu) { @include b(cascader-menu) {
min-width: 180px; min-width: 180px;
box-sizing: border-box; box-sizing: border-box;
color: var(--el-cascader-menu-font-color); color: var(--el-cascader-menu-text-color);
border-right: var(--el-cascader-menu-border); border-right: var(--el-cascader-menu-border);
&:last-child { &:last-child {
@ -76,13 +76,13 @@
outline: none; outline: none;
&.is-selectable.in-active-path { &.is-selectable.in-active-path {
color: var(--el-cascader-menu-font-color); color: var(--el-cascader-menu-text-color);
} }
&.in-active-path, &.in-active-path,
&.is-selectable.in-checked-path, &.is-selectable.in-checked-path,
&.is-active { &.is-active {
color: var(--el-cascader-menu-selected-font-color); color: var(--el-cascader-menu-selected-text-color);
font-weight: bold; font-weight: bold;
} }

6
packages/theme-chalk/src/cascader.scss
View File

@ -153,7 +153,7 @@
margin: 0; margin: 0;
padding: 6px 0; padding: 6px 0;
font-size: var(--el-font-size-base); font-size: var(--el-font-size-base);
color: var(--el-cascader-menu-font-color); color: var(--el-cascader-menu-text-color);
text-align: center; text-align: center;
} }
@ -173,7 +173,7 @@
} }
&.is-checked { &.is-checked {
color: var(--el-cascader-menu-selected-font-color); color: var(--el-cascader-menu-selected-text-color);
font-weight: bold; font-weight: bold;
} }
@ -193,7 +193,7 @@
min-width: 60px; min-width: 60px;
margin: 2px 0 2px 15px; margin: 2px 0 2px 15px;
padding: 0; padding: 0;
color: var(--el-cascader-menu-font-color); color: var(--el-cascader-menu-text-color);
border: none; border: none;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;

15
packages/theme-chalk/src/checkbox-button.scss
View File

@ -21,13 +21,10 @@
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
background: var( background: var(--el-button-bg-color, map.get($button, 'bg-color'));
--el-button-background-color,
map.get($button, 'background-color')
);
border: $border-base; border: $border-base;
border-left: 0; border-left: 0;
color: var(--el-button-font-color, map.get($button, 'font-color')); color: var(--el-button-text-color, map.get($button, 'text-color'));
-webkit-appearance: none; -webkit-appearance: none;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
@ -67,8 +64,8 @@
&.is-checked { &.is-checked {
& .#{$namespace}-checkbox-button__inner { & .#{$namespace}-checkbox-button__inner {
color: var(--el-checkbox-button-checked-font-color); color: var(--el-checkbox-button-checked-text-color);
background-color: var(--el-checkbox-button-checked-background-color); background-color: var(--el-checkbox-button-checked-bg-color);
border-color: var(--el-checkbox-button-checked-border-color); border-color: var(--el-checkbox-button-checked-border-color);
box-shadow: -1px 0 0 0 var(--el-color-primary-light-4); box-shadow: -1px 0 0 0 var(--el-color-primary-light-4);
} }
@ -86,8 +83,8 @@
cursor: not-allowed; cursor: not-allowed;
background-image: none; background-image: none;
background-color: var( background-color: var(
--el-button-disabled-background-color, --el-button-disabled-bg-color,
map.get($button, 'disabled-background-color') map.get($button, 'disabled-bg-color')
); );
border-color: var( border-color: var(
--el-button-disabled-border-color, --el-button-disabled-border-color,

10
packages/theme-chalk/src/checkbox.scss
View File

@ -49,7 +49,7 @@ $checkbox-bordered-input-width: map.merge(
} }
@include b(checkbox) { @include b(checkbox) {
color: var(--el-checkbox-font-color); color: var(--el-checkbox-text-color);
font-weight: var(--el-checkbox-font-weight); font-weight: var(--el-checkbox-font-weight);
font-size: var(--el-font-size-base); font-size: var(--el-font-size-base);
position: relative; position: relative;
@ -167,7 +167,7 @@ $checkbox-bordered-input-width: map.merge(
@include when(checked) { @include when(checked) {
.#{$namespace}-checkbox__inner { .#{$namespace}-checkbox__inner {
background-color: var(--el-checkbox-checked-background-color); background-color: var(--el-checkbox-checked-bg-color);
border-color: var(--el-checkbox-checked-input-border-color); border-color: var(--el-checkbox-checked-input-border-color);
&::after { &::after {
@ -176,7 +176,7 @@ $checkbox-bordered-input-width: map.merge(
} }
& + .#{$namespace}-checkbox__label { & + .#{$namespace}-checkbox__label {
color: var(--el-checkbox-checked-font-color); color: var(--el-checkbox-checked-text-color);
} }
} }
@include when(focus) { @include when(focus) {
@ -187,7 +187,7 @@ $checkbox-bordered-input-width: map.merge(
} }
@include when(indeterminate) { @include when(indeterminate) {
.#{$namespace}-checkbox__inner { .#{$namespace}-checkbox__inner {
background-color: var(--el-checkbox-checked-background-color); background-color: var(--el-checkbox-checked-bg-color);
border-color: var(--el-checkbox-checked-input-border-color); border-color: var(--el-checkbox-checked-input-border-color);
&::before { &::before {
@ -216,7 +216,7 @@ $checkbox-bordered-input-width: map.merge(
box-sizing: border-box; box-sizing: border-box;
width: var(--el-checkbox-input-width); width: var(--el-checkbox-input-width);
height: var(--el-checkbox-input-height); height: var(--el-checkbox-input-height);
background-color: var(--el-checkbox-background-color); background-color: var(--el-checkbox-bg-color);
z-index: var(--el-index-normal); z-index: var(--el-index-normal);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

10
packages/theme-chalk/src/collapse.scss
View File

@ -13,7 +13,7 @@
@include b(collapse-item) { @include b(collapse-item) {
@include when(disabled) { @include when(disabled) {
.#{$namespace}-collapse-item__header { .#{$namespace}-collapse-item__header {
color: var(--el-font-color-disabled-base); color: var(--el-text-color-disabled-base);
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -22,8 +22,8 @@
align-items: center; align-items: center;
height: var(--el-collapse-header-height); height: var(--el-collapse-header-height);
line-height: var(--el-collapse-header-height); line-height: var(--el-collapse-header-height);
background-color: var(--el-collapse-header-background-color); background-color: var(--el-collapse-header-bg-color);
color: var(--el-collapse-header-font-color); color: var(--el-collapse-header-text-color);
cursor: pointer; cursor: pointer;
border-bottom: 1px solid var(--el-collapse-border-color); border-bottom: 1px solid var(--el-collapse-border-color);
font-size: var(--el-collapse-header-font-size); font-size: var(--el-collapse-header-font-size);
@ -48,7 +48,7 @@
@include e(wrap) { @include e(wrap) {
will-change: height; will-change: height;
background-color: var(--el-collapse-content-background-color); background-color: var(--el-collapse-content-bg-color);
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid var(--el-collapse-border-color); border-bottom: 1px solid var(--el-collapse-border-color);
@ -57,7 +57,7 @@
@include e(content) { @include e(content) {
padding-bottom: 25px; padding-bottom: 25px;
font-size: var(--el-collapse-content-font-size); font-size: var(--el-collapse-content-font-size);
color: var(--el-collapse-content-font-color); color: var(--el-collapse-content-text-color);
line-height: 1.769230769230769; line-height: 1.769230769230769;
} }

2
packages/theme-chalk/src/common/popup.scss
View File

@ -37,7 +37,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: var(--el-popup-modal-opacity); opacity: var(--el-popup-modal-opacity);
background: var(--el-popup-modal-background-color); background: var(--el-popup-modal-bg-color);
} }
@include b(popup-parent) { @include b(popup-parent) {

150
packages/theme-chalk/src/common/var.scss
View File

@ -153,7 +153,7 @@ $font-size: map.merge(
); );
// Disable base // Disable base
$disabled-fill-base: var(--el-background-color-base) !default; $disabled-fill-base: var(--el-bg-color-base) !default;
$disabled-color-base: var(--el-text-color-placeholder) !default; $disabled-color-base: var(--el-text-color-placeholder) !default;
$disabled-border-base: var(--el-border-color-light) !default; $disabled-border-base: var(--el-border-color-light) !default;
@ -164,11 +164,11 @@ $checkbox: map.merge(
( (
'font-size': 14px, 'font-size': 14px,
'font-weight': var(--el-font-weight-primary), 'font-weight': var(--el-font-weight-primary),
'font-color': var(--el-text-color-regular), 'text-color': var(--el-text-color-regular),
'input-height': 14px, 'input-height': 14px,
'input-width': 14px, 'input-width': 14px,
'border-radius': var(--el-border-radius-small), 'border-radius': var(--el-border-radius-small),
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'input-border': var(--el-border-base), 'input-border': var(--el-border-base),
'disabled-border-color': var(--el-border-color-base), 'disabled-border-color': var(--el-border-color-base),
'disabled-input-fill': #edf2fc, 'disabled-input-fill': #edf2fc,
@ -176,9 +176,9 @@ $checkbox: map.merge(
'disabled-checked-input-fill': var(--el-border-color-extra-light), 'disabled-checked-input-fill': var(--el-border-color-extra-light),
'disabled-checked-input-border-color': var(--el-border-color-base), 'disabled-checked-input-border-color': var(--el-border-color-base),
'disabled-checked-icon-color': var(--el-text-color-placeholder), 'disabled-checked-icon-color': var(--el-text-color-placeholder),
'checked-font-color': var(--el-color-primary), 'checked-text-color': var(--el-color-primary),
'checked-input-border-color': var(--el-color-primary), 'checked-input-border-color': var(--el-color-primary),
'checked-background-color': var(--el-color-primary), 'checked-bg-color': var(--el-color-primary),
'checked-icon-color': var(--el-fill-base), 'checked-icon-color': var(--el-fill-base),
'input-border-color-hover': var(--el-color-primary), 'input-border-color-hover': var(--el-color-primary),
), ),
@ -188,8 +188,8 @@ $checkbox: map.merge(
$checkbox-button: () !default; $checkbox-button: () !default;
$checkbox-button: map.merge( $checkbox-button: map.merge(
( (
'checked-background-color': var(--el-color-primary), 'checked-bg-color': var(--el-color-primary),
'checked-font-color': var(--el-color-white), 'checked-text-color': var(--el-color-white),
'checked-border-color': var(--el-color-primary), 'checked-border-color': var(--el-color-primary),
), ),
$checkbox-button $checkbox-button
@ -201,12 +201,12 @@ $radio: () !default;
$radio: map.merge( $radio: map.merge(
( (
'font-size': var(--el-font-size-base), 'font-size': var(--el-font-size-base),
'font-color': var(--el-text-color-regular), 'text-color': var(--el-text-color-regular),
'font-weight': var(--el-font-weight-primary), 'font-weight': var(--el-font-weight-primary),
'input-height': 14px, 'input-height': 14px,
'input-width': 14px, 'input-width': 14px,
'input-border-radius': var(--el-border-radius-circle), 'input-border-radius': var(--el-border-radius-circle),
'input-background-color': var(--el-color-white), 'input-bg-color': var(--el-color-white),
'input-border': var(--el-border-base), 'input-border': var(--el-border-base),
'input-border-color': var(--el-border-color-base), 'input-border-color': var(--el-border-color-base),
'input-border-color-hover': var(--el-color-primary), 'input-border-color-hover': var(--el-color-primary),
@ -228,8 +228,8 @@ $radio-height: map.merge(
$radio-button: () !default; $radio-button: () !default;
$radio-button: map.merge( $radio-button: map.merge(
( (
'checked-background-color': var(--el-color-primary), 'checked-bg-color': var(--el-color-primary),
'checked-font-color': var(--el-color-white), 'checked-text-color': var(--el-color-white),
'checked-border-color': var(--el-color-primary), 'checked-border-color': var(--el-color-primary),
'disabled-checked-fill': var(--el-border-color-extra-light), 'disabled-checked-fill': var(--el-border-color-extra-light),
), ),
@ -252,7 +252,7 @@ $radio-disabled: map.merge(
$radio-checked: () !default; $radio-checked: () !default;
$radio-checked: map.merge( $radio-checked: map.merge(
( (
'font-color': var(--el-color-primary), 'text-color': var(--el-color-primary),
'input-border-color': var(--el-color-primary), 'input-border-color': var(--el-color-primary),
'icon-color': var(--el-color-primary), 'icon-color': var(--el-color-primary),
), ),
@ -309,11 +309,11 @@ $select: map.merge(
$select-option: () !default; $select-option: () !default;
$select-option: map.merge( $select-option: map.merge(
( (
'color': var(--el-text-color-regular), 'text-color': var(--el-text-color-regular),
'disabled-color': var(--el-text-color-placeholder), 'disabled-color': var(--el-text-color-placeholder),
'height': 34px, 'height': 34px,
'hover-background': var(--el-background-color-base), 'hover-background': var(--el-bg-color-base),
'selected-font-color': var(--el-color-primary), 'selected-text-color': var(--el-color-primary),
), ),
$select-option $select-option
); );
@ -321,7 +321,7 @@ $select-option: map.merge(
$select-group: () !default; $select-group: () !default;
$select-group: map.merge( $select-group: map.merge(
( (
'color': var(--el-color-info), 'text-color': var(--el-color-info),
'height': 30px, 'height': 30px,
'font-size': 12px, 'font-size': 12px,
), ),
@ -331,7 +331,7 @@ $select-group: map.merge(
$select-dropdown: () !default; $select-dropdown: () !default;
$select-dropdown: map.merge( $select-dropdown: map.merge(
( (
'background': var(--el-color-white), 'bg-color': var(--el-color-white),
'shadow': var(--el-box-shadow-light), 'shadow': var(--el-box-shadow-light),
'empty-color': var(--el-text-color-secondary), 'empty-color': var(--el-text-color-secondary),
'max-height': 274px, 'max-height': 274px,
@ -382,7 +382,7 @@ $message: () !default;
$message: map.merge( $message: map.merge(
( (
'min-width': 380px, 'min-width': 380px,
'background-color': #edf2fc, 'bg-color': #edf2fc,
'padding': 15px 15px 15px 20px, 'padding': 15px 15px 15px 20px,
'close-size': 16px, 'close-size': 16px,
'close-icon-color': var(--el-text-color-placeholder), 'close-icon-color': var(--el-text-color-placeholder),
@ -421,11 +421,11 @@ $notification: map.merge(
$input: () !default; $input: () !default;
$input: map.merge( $input: map.merge(
( (
'font-color': var(--el-text-color-regular), 'text-color': var(--el-text-color-regular),
'border': var(--el-border-base), 'border': var(--el-border-base),
'border-color': var(--el-border-color-base), 'border-color': var(--el-border-color-base),
'border-radius': var(--el-border-radius-base), 'border-radius': var(--el-border-radius-base),
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'icon-color': var(--el-text-color-placeholder), 'icon-color': var(--el-text-color-placeholder),
'placeholder-color': var(--el-text-color-placeholder), 'placeholder-color': var(--el-text-color-placeholder),
'hover-border': var(--el-border-color-hover), 'hover-border': var(--el-border-color-hover),
@ -440,7 +440,7 @@ $input-disabled: map.merge(
( (
'fill': var(--el-disabled-fill-base), 'fill': var(--el-disabled-fill-base),
'border': var(--el-disabled-border-base), 'border': var(--el-disabled-border-base),
'color': var(--el-disabled-color-base), 'text-color': var(--el-disabled-color-base),
'placeholder-color': var(--el-text-color-placeholder), 'placeholder-color': var(--el-text-color-placeholder),
), ),
$input-disabled $input-disabled
@ -493,14 +493,14 @@ $input-number-width: map.merge(
$cascader: () !default; $cascader: () !default;
$cascader: map.merge( $cascader: map.merge(
( (
'menu-font-color': var(--el-text-color-regular), 'menu-text-color': var(--el-text-color-regular),
'menu-selected-font-color': var(--el-color-primary), 'menu-selected-text-color': var(--el-color-primary),
'menu-fill': var(--el-fill-base), 'menu-fill': var(--el-fill-base),
'menu-font-size': var(--el-font-size-base), 'menu-font-size': var(--el-font-size-base),
'menu-radius': var(--el-border-radius-base), 'menu-radius': var(--el-border-radius-base),
'menu-border': solid 1px var(--el-border-color-light), 'menu-border': solid 1px var(--el-border-color-light),
'menu-shadow': var(--el-box-shadow-light), 'menu-shadow': var(--el-box-shadow-light),
'node-background-hover': var(--el-background-color-base), 'node-background-hover': var(--el-bg-color-base),
'node-color-disabled': var(--el-text-color-placeholder), 'node-color-disabled': var(--el-text-color-placeholder),
'color-empty': var(--el-text-color-placeholder), 'color-empty': var(--el-text-color-placeholder),
'tag-background': #f0f2f5, 'tag-background': #f0f2f5,
@ -622,7 +622,7 @@ $dialog: map.merge(
( (
'width': 50%, 'width': 50%,
'margin-top': 15vh, 'margin-top': 15vh,
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3), 'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
'title-font-size': var(--el-font-size-large), 'title-font-size': var(--el-font-size-large),
'content-font-size': 14px, 'content-font-size': 14px,
@ -639,15 +639,15 @@ $table: map.merge(
( (
'border-color': var(--el-border-color-lighter), 'border-color': var(--el-border-color-lighter),
'border': 1px solid var(--el-table-border-color), 'border': 1px solid var(--el-table-border-color),
'font-color': var(--el-text-color-regular), 'text-color': var(--el-text-color-regular),
'header-font-color': var(--el-text-color-secondary), 'header-text-color': var(--el-text-color-secondary),
'row-hover-background-color': var(--el-background-color-base), 'row-hover-bg-color': var(--el-bg-color-base),
'current-row-background-color': var(--el-color-primary-light-9), 'current-row-bg-color': var(--el-color-primary-light-9),
'header-background-color': var(--el-color-white), 'header-bg-color': var(--el-color-white),
'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12), 'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'tr-background-color': var(--el-color-white), 'tr-bg-color': var(--el-color-white),
'expanded-cell-background-color': var(--el-color-white), 'expanded-cell-bg-color': var(--el-color-white),
), ),
$table $table
); );
@ -658,14 +658,14 @@ $pagination: () !default;
$pagination: map.merge( $pagination: map.merge(
( (
'font-size': 13px, 'font-size': 13px,
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'font-color': var(--el-text-color-primary), 'text-color': var(--el-text-color-primary),
'border-radius': 3px, 'border-radius': 3px,
'button-color': var(--el-text-color-primary), 'button-color': var(--el-text-color-primary),
'button-width': 35.5px, 'button-width': 35.5px,
'button-height': 28px, 'button-height': 28px,
'button-disabled-color': var(--el-text-color-placeholder), 'button-disabled-color': var(--el-text-color-placeholder),
'button-disabled-background-color': var(--el-color-white), 'button-disabled-bg-color': var(--el-color-white),
'hover-color': var(--el-color-primary), 'hover-color': var(--el-color-primary),
'height-extra-small': 22px, 'height-extra-small': 22px,
'line-height-extra-small': var(--el-pagination-height-extra-small), 'line-height-extra-small': var(--el-pagination-height-extra-small),
@ -678,7 +678,7 @@ $pagination: map.merge(
$popup: () !default; $popup: () !default;
$popup: map.merge( $popup: map.merge(
( (
'modal-background-color': var(--el-color-black), 'modal-bg-color': var(--el-color-black),
'modal-opacity': 0.5, 'modal-opacity': 0.5,
), ),
$popup $popup
@ -689,13 +689,13 @@ $popup: map.merge(
$popover: () !default; $popover: () !default;
$popover: map.merge( $popover: map.merge(
( (
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'font-size': var(--el-font-size-base), 'font-size': var(--el-font-size-base),
'border-color': var(--el-border-color-lighter), 'border-color': var(--el-border-color-lighter),
'padding': 12px, 'padding': 12px,
'padding-large': 18px 20px, 'padding-large': 18px 20px,
'title-font-size': 16px, 'title-font-size': 16px,
'title-font-color': var(--el-text-color-primary), 'title-text-color': var(--el-text-color-primary),
'border-radius': 4px, 'border-radius': 4px,
), ),
$popover $popover
@ -726,7 +726,7 @@ $tooltip: () !default;
$tooltip: map.merge( $tooltip: map.merge(
( (
'fill': var(--el-text-color-primary), 'fill': var(--el-text-color-primary),
'color': var(--el-color-white), 'text-color': var(--el-color-white),
'font-size': 12px, 'font-size': 12px,
'border-color': var(--el-text-color-primary), 'border-color': var(--el-text-color-primary),
'arrow-size': 6px, 'arrow-size': 6px,
@ -774,8 +774,8 @@ $tag-height: map.merge(
$tree: () !default; $tree: () !default;
$tree: map.merge( $tree: map.merge(
( (
'node-hover-background-color': var(--el-background-color-base), 'node-hover-bg-color': var(--el-bg-color-base),
'font-color': var(--el-text-color-regular), 'text-color': var(--el-text-color-regular),
'expand-icon-color': var(--el-text-color-placeholder), 'expand-icon-color': var(--el-text-color-placeholder),
), ),
$tree $tree
@ -798,7 +798,7 @@ $dropdown: map.merge(
$drawer: () !default; $drawer: () !default;
$drawer: map.merge( $drawer: map.merge(
( (
'background-color': var(--el-dialog-background-color, var(--el-color-white)), 'bg-color': var(--el-dialog-bg-color, var(--el-color-white)),
'padding-primary': var(--el-dialog-padding-primary, 20px), 'padding-primary': var(--el-dialog-padding-primary, 20px),
), ),
$drawer $drawer
@ -809,7 +809,7 @@ $drawer: map.merge(
$badge: () !default; $badge: () !default;
$badge: map.merge( $badge: map.merge(
( (
'background-color': var(--el-color-danger), 'bg-color': var(--el-color-danger),
'radius': 10px, 'radius': 10px,
'font-size': 12px, 'font-size': 12px,
'padding': 6px, 'padding': 6px,
@ -826,7 +826,7 @@ $card: map.merge(
var(--el-border-color-light, map.get($border-color, 'lighter')), var(--el-border-color-light, map.get($border-color, 'lighter')),
'border-radius': 4px, 'border-radius': 4px,
'padding': 20px, 'padding': 20px,
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
), ),
$card $card
); );
@ -834,7 +834,7 @@ $card: map.merge(
$dark-card: () !default; $dark-card: () !default;
$dark-card: map.merge( $dark-card: map.merge(
( (
'background-color': var(--el-color-black), 'bg-color': var(--el-color-black),
), ),
$dark-card $dark-card
); );
@ -844,9 +844,9 @@ $dark-card: map.merge(
$slider: () !default; $slider: () !default;
$slider: map.merge( $slider: map.merge(
( (
'main-background-color': var(--el-color-primary), 'main-bg-color': var(--el-color-primary),
'runway-background-color': var(--el-border-color-light), 'runway-bg-color': var(--el-border-color-light),
'stop-background-color': var(--el-color-white), 'stop-bg-color': var(--el-color-white),
'disable-color': var(--el-text-color-placeholder), 'disable-color': var(--el-text-color-placeholder),
'margin': 16px 0, 'margin': 16px 0,
'border-radius': 3px, 'border-radius': 3px,
@ -866,8 +866,8 @@ $menu: map.merge(
'active-color': var(--el-color-primary), 'active-color': var(--el-color-primary),
'text-color': var(--el-text-color-primary), 'text-color': var(--el-text-color-primary),
'hover-text-color': var(--el-text-color-primary), 'hover-text-color': var(--el-text-color-primary),
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'hover-background-color': var(--el-color-primary-light-9), 'hover-bg-color': var(--el-color-primary-light-9),
'item-font-size': var(--el-font-size-base), 'item-font-size': var(--el-font-size-base),
'item-hover-fill': var(--el-color-primary-light-9), 'item-hover-fill': var(--el-color-primary-light-9),
'border-color': #e6e6e6, 'border-color': #e6e6e6,
@ -893,16 +893,16 @@ $rate: map.merge(
$datepicker: () !default; $datepicker: () !default;
$datepicker: map.merge( $datepicker: map.merge(
( (
'font-color': var(--el-text-color-regular), 'text-color': var(--el-text-color-regular),
'off-font-color': var(--el-text-color-placeholder), 'off-text-color': var(--el-text-color-placeholder),
'header-font-color': var(--el-text-color-regular), 'header-text-color': var(--el-text-color-regular),
'icon-color': var(--el-text-color-primary), 'icon-color': var(--el-text-color-primary),
'border-color': var(--el-disabled-border-base), 'border-color': var(--el-disabled-border-base),
'inner-border-color': var(--el-border-color-light), 'inner-border-color': var(--el-border-color-light),
'inrange-background-color': var(--el-border-color-extra-light), 'inrange-bg-color': var(--el-border-color-extra-light),
'inrange-hover-background-color': var(--el-border-color-extra-light), 'inrange-hover-bg-color': var(--el-border-color-extra-light),
'active-color': var(--el-color-primary), 'active-color': var(--el-color-primary),
'hover-font-color': var(--el-color-primary), 'hover-text-color': var(--el-color-primary),
), ),
$datepicker $datepicker
); );
@ -935,9 +935,9 @@ $scrollbar: () !default;
$scrollbar: map.merge( $scrollbar: map.merge(
( (
'opacity': 0.3, 'opacity': 0.3,
'background-color': var(--el-text-color-secondary), 'bg-color': var(--el-text-color-secondary),
'hover-opacity': 0.5, 'hover-opacity': 0.5,
'hover-background-color': var(--el-text-color-secondary), 'hover-bg-color': var(--el-text-color-secondary),
), ),
$scrollbar $scrollbar
); );
@ -967,12 +967,12 @@ $collapse: map.merge(
( (
'border-color': var(--el-border-color-lighter), 'border-color': var(--el-border-color-lighter),
'header-height': 48px, 'header-height': 48px,
'header-background-color': var(--el-color-white), 'header-bg-color': var(--el-color-white),
'header-font-color': var(--el-text-color-primary), 'header-text-color': var(--el-text-color-primary),
'header-font-size': 13px, 'header-font-size': 13px,
'content-background-color': var(--el-color-white), 'content-bg-color': var(--el-color-white),
'content-font-size': 13px, 'content-font-size': 13px,
'content-font-color': var(--el-text-color-primary), 'content-text-color': var(--el-text-color-primary),
), ),
$collapse $collapse
); );
@ -986,7 +986,7 @@ $transfer: map.merge(
'border-radius': var(--el-border-radius-base), 'border-radius': var(--el-border-radius-base),
'panel-width': 200px, 'panel-width': 200px,
'panel-header-height': 40px, 'panel-header-height': 40px,
'panel-header-background-color': var(--el-background-color-base), 'panel-header-bg-color': var(--el-bg-color-base),
'panel-footer-height': 40px, 'panel-footer-height': 40px,
'panel-body-height': 246px, 'panel-body-height': 246px,
'item-height': 30px, 'item-height': 30px,
@ -1012,9 +1012,9 @@ $timeline: map.merge(
$backtop: () !default; $backtop: () !default;
$backtop: map.merge( $backtop: map.merge(
( (
'background-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'font-color': var(--el-color-primary), 'text-color': var(--el-color-primary),
'hover-background-color': var(--el-border-color-extra-light), 'hover-bg-color': var(--el-border-color-extra-light),
), ),
$backtop $backtop
); );
@ -1026,18 +1026,18 @@ $link: map.merge(
( (
'font-size': var(--el-font-size-base), 'font-size': var(--el-font-size-base),
'font-weight': var(--el-font-weight-primary), 'font-weight': var(--el-font-weight-primary),
'default-font-color': var(--el-text-color-regular), 'default-text-color': var(--el-text-color-regular),
'default-active-color': var(--el-color-primary), 'default-active-color': var(--el-color-primary),
'disabled-font-color': var(--el-text-color-placeholder), 'disabled-text-color': var(--el-text-color-placeholder),
), ),
$link $link
); );
$link-font-color: () !default; $link-text-color: () !default;
@each $type in $types { @each $type in $types {
$link-font-color: map.merge( $link-text-color: map.merge(
$link-font-color, $link-text-color,
( (
$type: map.get($colors, $type, 'base'), $type: map.get($colors, $type, 'base'),
) )
@ -1051,7 +1051,7 @@ $calendar: map.merge(
( (
'border': var(--el-table-border, 1px solid var(--el-border-color-lighter)), 'border': var(--el-table-border, 1px solid var(--el-border-color-lighter)),
'header-border-bottom': var(--el-calendar-border), 'header-border-bottom': var(--el-calendar-border),
'selected-background-color': #f2f8fe, 'selected-bg-color': #f2f8fe,
'cell-width': 85px, 'cell-width': 85px,
), ),
$calendar $calendar
@ -1073,8 +1073,8 @@ $form: map.merge(
$avatar: () !default; $avatar: () !default;
$avatar: map.merge( $avatar: map.merge(
( (
'font-color': #fff, 'text-color': #fff,
'background-color': #c0c4cc, 'bg-color': #c0c4cc,
'text-font-size': 14px, 'text-font-size': 14px,
'icon-font-size': 18px, 'icon-font-size': 18px,
'border-radius': var(--el-border-radius-base), 'border-radius': var(--el-border-radius-base),

2
packages/theme-chalk/src/date-picker/date-picker.scss
View File

@ -72,7 +72,7 @@
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
&:hover { &:hover {
color: var(--el-datepicker-hover-font-color); color: var(--el-datepicker-hover-text-color);
} }
&.active { &.active {

22
packages/theme-chalk/src/date-picker/date-table.scss
View File

@ -9,10 +9,10 @@
.#{$namespace}-date-table__row { .#{$namespace}-date-table__row {
&:hover { &:hover {
.el-date-table-cell { .el-date-table-cell {
background-color: var(--el-datepicker-inrange-background-color); background-color: var(--el-datepicker-inrange-bg-color);
} }
td.available:hover { td.available:hover {
color: var(--el-datepicker-font-color); color: var(--el-datepicker-text-color);
} }
td:first-child .el-date-table-cell { td:first-child .el-date-table-cell {
margin-left: 5px; margin-left: 5px;
@ -27,7 +27,7 @@
} }
&.current .el-date-table-cell { &.current .el-date-table-cell {
background-color: var(--el-datepicker-inrange-background-color); background-color: var(--el-datepicker-inrange-bg-color);
} }
} }
} }
@ -60,7 +60,7 @@
&.next-month, &.next-month,
&.prev-month { &.prev-month {
color: var(--el-datepicker-off-font-color); color: var(--el-datepicker-off-text-color);
} }
&.today { &.today {
@ -76,13 +76,13 @@
} }
&.available:hover { &.available:hover {
color: var(--el-datepicker-hover-font-color); color: var(--el-datepicker-hover-text-color);
} }
&.in-range .el-date-table-cell { &.in-range .el-date-table-cell {
background-color: var(--el-datepicker-inrange-background-color); background-color: var(--el-datepicker-inrange-bg-color);
&:hover { &:hover {
background-color: var(--el-datepicker-inrange-hover-background-color); background-color: var(--el-datepicker-inrange-hover-bg-color);
} }
} }
@ -122,10 +122,10 @@
&.selected .el-date-table-cell { &.selected .el-date-table-cell {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
background-color: var(--el-datepicker-inrange-background-color); background-color: var(--el-datepicker-inrange-bg-color);
border-radius: 15px; border-radius: 15px;
&:hover { &:hover {
background-color: var(--el-datepicker-inrange-hover-background-color); background-color: var(--el-datepicker-inrange-hover-bg-color);
} }
} }
@ -137,13 +137,13 @@
&.week { &.week {
font-size: 80%; font-size: 80%;
color: var(--el-datepicker-header-font-color); color: var(--el-datepicker-header-text-color);
} }
} }
th { th {
padding: 5px; padding: 5px;
color: var(--el-datepicker-header-font-color); color: var(--el-datepicker-header-text-color);
font-weight: 400; font-weight: 400;
border-bottom: solid 1px var(--el-border-color-lighter); border-bottom: solid 1px var(--el-border-color-lighter);
} }

8
packages/theme-chalk/src/date-picker/month-table.scss
View File

@ -41,18 +41,18 @@
height: 36px; height: 36px;
display: block; display: block;
line-height: 36px; line-height: 36px;
color: var(--el-datepicker-font-color); color: var(--el-datepicker-text-color);
margin: 0 auto; margin: 0 auto;
border-radius: 18px; border-radius: 18px;
&:hover { &:hover {
color: var(--el-datepicker-hover-font-color); color: var(--el-datepicker-hover-text-color);
} }
} }
&.in-range div { &.in-range div {
background-color: var(--el-datepicker-inrange-background-color); background-color: var(--el-datepicker-inrange-bg-color);
&:hover { &:hover {
background-color: var(--el-datepicker-inrange-hover-background-color); background-color: var(--el-datepicker-inrange-hover-bg-color);
} }
} }
&.start-date div, &.start-date div,

8
packages/theme-chalk/src/date-picker/picker-panel.scss
View File

@ -43,14 +43,14 @@
background-color: transparent; background-color: transparent;
line-height: 28px; line-height: 28px;
font-size: 14px; font-size: 14px;
color: var(--el-datepicker-font-color); color: var(--el-datepicker-text-color);
padding-left: 12px; padding-left: 12px;
text-align: left; text-align: left;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: var(--el-datepicker-hover-font-color); color: var(--el-datepicker-hover-text-color);
} }
&.active { &.active {
@ -86,11 +86,11 @@
margin-top: 8px; margin-top: 8px;
&:hover { &:hover {
color: var(--el-datepicker-hover-font-color); color: var(--el-datepicker-hover-text-color);
} }
@include when(disabled) { @include when(disabled) {
color: var(--el-font-color-disabled-base); color: var(--el-text-color-disabled-base);
&:hover { &:hover {
cursor: not-allowed; cursor: not-allowed;

6
packages/theme-chalk/src/date-picker/picker.scss
View File

@ -173,7 +173,7 @@
@include when(disabled) { @include when(disabled) {
background-color: map.get($input-disabled, 'fill'); background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border'); border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color'); color: map.get($input-disabled, 'text-color');
cursor: not-allowed; cursor: not-allowed;
&:hover, &:hover,
@ -183,7 +183,7 @@
input { input {
background-color: map.get($input-disabled, 'fill'); background-color: map.get($input-disabled, 'fill');
color: map.get($input-disabled, 'color'); color: map.get($input-disabled, 'text-color');
cursor: not-allowed; cursor: not-allowed;
&::placeholder { &::placeholder {
color: map.get($input-disabled, 'placeholder-color'); color: map.get($input-disabled, 'placeholder-color');
@ -191,7 +191,7 @@
} }
.#{$namespace}-range-separator { .#{$namespace}-range-separator {
color: map.get($input-disabled, 'color'); color: map.get($input-disabled, 'text-color');
} }
} }
} }

6
packages/theme-chalk/src/date-picker/year-table.scss
View File

@ -23,7 +23,7 @@
} }
&.disabled .cell { &.disabled .cell {
background-color: var(--el-background-color-base); background-color: var(--el-bg-color-base);
cursor: not-allowed; cursor: not-allowed;
color: var(--el-text-color-placeholder); color: var(--el-text-color-placeholder);
@ -37,11 +37,11 @@
height: 32px; height: 32px;
display: block; display: block;
line-height: 32px; line-height: 32px;
color: var(--el-datepicker-font-color); color: var(--el-datepicker-text-color);
margin: 0 auto; margin: 0 auto;
&:hover { &:hover {
color: var(--el-datepicker-hover-font-color); color: var(--el-datepicker-hover-text-color);
} }
} }

2
packages/theme-chalk/src/dialog.scss
View File

@ -11,7 +11,7 @@
position: relative; position: relative;
margin: var(--el-dialog-margin-top, 15vh) auto 50px; margin: var(--el-dialog-margin-top, 15vh) auto 50px;
background: var(--el-dialog-background-color); background: var(--el-dialog-bg-color);
border-radius: var(--el-border-radius-small); border-radius: var(--el-border-radius-small);
box-shadow: var(--el-dialog-box-shadow); box-shadow: var(--el-dialog-box-shadow);
box-sizing: border-box; box-sizing: border-box;

2
packages/theme-chalk/src/drawer.scss
View File

@ -11,7 +11,7 @@ $directions: rtl, ltr, ttb, btt;
@include b(drawer) { @include b(drawer) {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--el-drawer-background-color); background-color: var(--el-drawer-bg-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),

2
packages/theme-chalk/src/dropdown.scss
View File

@ -148,7 +148,7 @@
@include when(disabled) { @include when(disabled) {
cursor: not-allowed; cursor: not-allowed;
color: var(--el-font-color-disabled-base); color: var(--el-text-color-disabled-base);
} }
} }

20
packages/theme-chalk/src/input.scss
View File

@ -24,11 +24,8 @@
width: 100%; width: 100%;
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
color: var(--el-input-font-color, map.get($input, 'font-color')); color: var(--el-input-text-color, map.get($input, 'text-color'));
background-color: var( background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
--el-input-background-color,
map.get($input, 'background-color')
);
background-image: none; background-image: none;
border: var(--el-input-border, map.get($input, 'border')); border: var(--el-input-border, map.get($input, 'border'));
border-radius: var( border-radius: var(
@ -74,7 +71,7 @@
.#{$namespace}-textarea__inner { .#{$namespace}-textarea__inner {
background-color: map.get($input-disabled, 'fill'); background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border'); border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color'); color: map.get($input-disabled, 'text-color');
cursor: not-allowed; cursor: not-allowed;
&::placeholder { &::placeholder {
@ -132,10 +129,7 @@
@include e(inner) { @include e(inner) {
-webkit-appearance: none; -webkit-appearance: none;
background-color: var( background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
--el-input-background-color,
map.get($input, 'background-color')
);
background-image: none; background-image: none;
border-radius: var( border-radius: var(
--el-input-border-radius, --el-input-border-radius,
@ -143,7 +137,7 @@
); );
border: var(--el-input-border, map.get($input, 'border')); border: var(--el-input-border, map.get($input, 'border'));
box-sizing: border-box; box-sizing: border-box;
color: var(--el-input-font-color, map.get($input, 'font-color')); color: var(--el-input-text-color, map.get($input, 'text-color'));
display: inline-block; display: inline-block;
font-size: inherit; font-size: inherit;
height: map.get($input-height, 'default'); height: map.get($input-height, 'default');
@ -238,7 +232,7 @@
.#{$namespace}-input__inner { .#{$namespace}-input__inner {
background-color: map.get($input-disabled, 'fill'); background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border'); border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color'); color: map.get($input-disabled, 'text-color');
cursor: not-allowed; cursor: not-allowed;
&::placeholder { &::placeholder {
@ -307,7 +301,7 @@
} }
@include e((append, prepend)) { @include e((append, prepend)) {
background-color: var(--el-background-color-base); background-color: var(--el-bg-color-base);
color: var(--el-color-info); color: var(--el-color-info);
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;

16
packages/theme-chalk/src/link.scss
View File

@ -45,7 +45,7 @@
} }
&.#{$namespace}-link--default { &.#{$namespace}-link--default {
color: var(--el-link-default-font-color); color: var(--el-link-default-text-color);
&:hover { &:hover {
color: var(--el-link-default-active-color); color: var(--el-link-default-active-color);
@ -56,29 +56,29 @@
} }
@include when(disabled) { @include when(disabled) {
color: var(--el-link-disabled-font-color); color: var(--el-link-disabled-text-color);
} }
} }
@each $type in $types { @each $type in $types {
&.#{$namespace}-link--#{$type} { &.#{$namespace}-link--#{$type} {
--el-link-font-color: var(--el-color-#{$type}); --el-link-text-color: var(--el-color-#{$type});
color: var(--el-link-font-color); color: var(--el-link-text-color);
&:hover { &:hover {
color: mix(map.get($link-font-color, $type), $color-white, 80%); color: mix(map.get($link-text-color, $type), $color-white, 80%);
} }
&:after { &:after {
border-color: var(--el-link-font-color); border-color: var(--el-link-text-color);
} }
@include when(disabled) { @include when(disabled) {
color: mix(map.get($link-font-color, $type), $color-white, 50%); color: mix(map.get($link-text-color, $type), $color-white, 50%);
} }
@include when(underline) { @include when(underline) {
&:hover:after { &:hover:after {
border-color: var(--el-link-font-color); border-color: var(--el-link-text-color);
} }
} }
} }

10
packages/theme-chalk/src/menu.scss
View File

@ -35,7 +35,7 @@
} }
&:hover { &:hover {
background-color: var(--el-menu-hover-background-color); background-color: var(--el-menu-hover-bg-color);
} }
@include when(disabled) { @include when(disabled) {
@ -53,7 +53,7 @@
position: relative; position: relative;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
background-color: var(--el-menu-background-color); background-color: var(--el-menu-bg-color);
box-sizing: border-box; box-sizing: border-box;
@include m(horizontal) { @include m(horizontal) {
@ -122,7 +122,7 @@
& .#{$namespace}-menu { & .#{$namespace}-menu {
& .#{$namespace}-menu-item, & .#{$namespace}-menu-item,
& .#{$namespace}-sub-menu__title { & .#{$namespace}-sub-menu__title {
background-color: var(--el-menu-background-color); background-color: var(--el-menu-bg-color);
display: flex; display: flex;
align-items: center; align-items: center;
height: 36px; height: 36px;
@ -139,7 +139,7 @@
& .#{$namespace}-menu-item:not(.is-disabled):focus { & .#{$namespace}-menu-item:not(.is-disabled):focus {
outline: none; outline: none;
color: var(--el-menu-hover-text-color); color: var(--el-menu-hover-text-color);
background-color: var(--el-menu-hover-background-color); background-color: var(--el-menu-hover-bg-color);
} }
& > .#{$namespace}-menu-item.is-active { & > .#{$namespace}-menu-item.is-active {
border-bottom: 2px solid var(--el-menu-active-color); border-bottom: 2px solid var(--el-menu-active-color);
@ -241,7 +241,7 @@
@include menu-item; @include menu-item;
&:hover { &:hover {
background-color: var(--el-menu-hover-background-color); background-color: var(--el-menu-hover-bg-color);
} }
} }
& .#{$namespace}-menu { & .#{$namespace}-menu {

14
packages/theme-chalk/src/message.scss
View File

@ -19,9 +19,9 @@
left: 50%; left: 50%;
top: 20px; top: 20px;
transform: translateX(-50%); transform: translateX(-50%);
background-color: var(--el-message-background-color); background-color: var(--el-message-bg-color);
transition: opacity 0.3s, transform 0.4s, top 0.4s; transition: opacity 0.3s, transform 0.4s, top 0.4s;
background-color: var(--el-message-background-color); background-color: var(--el-message-bg-color);
transition: opacity var(--el-transition-duration), transform 0.4s, top 0.4s; transition: opacity var(--el-transition-duration), transform 0.4s, top 0.4s;
padding: var(--el-message-padding); padding: var(--el-message-padding);
display: flex; display: flex;
@ -43,7 +43,7 @@
@include m(info) { @include m(info) {
.#{$namespace}-message__content { .#{$namespace}-message__content {
color: var(--el-message-info-font-color); color: var(--el-message-info-text-color);
} }
} }
@ -52,10 +52,10 @@
background-color: map.get($colors, $type, 'light-9'); background-color: map.get($colors, $type, 'light-9');
border-color: map.get($colors, $type, 'light-8'); border-color: map.get($colors, $type, 'light-8');
--el-message-font-color: var(--el-color-#{$type}); --el-message-text-color: var(--el-color-#{$type});
.#{$namespace}-message__content { .#{$namespace}-message__content {
color: var(--el-message-font-color); color: var(--el-message-text-color);
} }
} }
} }
@ -98,8 +98,8 @@
@each $type in (success, info, warning, error) { @each $type in (success, info, warning, error) {
& .#{$namespace}-message-icon--#{$type} { & .#{$namespace}-message-icon--#{$type} {
--el-message-font-color: var(--el-color-#{$type}); --el-message-text-color: var(--el-color-#{$type});
color: var(--el-message-font-color); color: var(--el-message-text-color);
} }
} }
} }

2
packages/theme-chalk/src/option-group.scss
View File

@ -44,7 +44,7 @@
@include e(title) { @include e(title) {
padding-left: $gap; padding-left: $gap;
font-size: map.get($select-group, 'font-size'); font-size: map.get($select-group, 'font-size');
color: map.get($select-group, 'color'); color: map.get($select-group, 'text-color');
line-height: map.get($select-group, 'height'); line-height: map.get($select-group, 'height');
} }

8
packages/theme-chalk/src/option-item.scss
View File

@ -13,7 +13,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: map.get($select-option, 'color'); color: map.get($select-option, 'text-color');
height: map.get($select-option, 'height'); height: map.get($select-option, 'height');
line-height: map.get($select-option, 'height'); line-height: map.get($select-option, 'height');
box-sizing: border-box; box-sizing: border-box;
@ -33,7 +33,7 @@
font-weight: 700; font-weight: 700;
&:not(.is-multiple) { &:not(.is-multiple) {
color: map.get($select-option, 'selected-font-color'); color: map.get($select-option, 'selected-text-color');
} }
} }
@ -49,8 +49,8 @@
@include when(multiple) { @include when(multiple) {
.el-select-dropdown__option-item { .el-select-dropdown__option-item {
&.is-selected { &.is-selected {
color: map.get($select-option, 'selected-font-color'); color: map.get($select-option, 'selected-text-color');
background-color: map.get($select-dropdown, 'background'); background-color: map.get($select-dropdown, 'bg-color');
& .el-icon { & .el-icon {
position: absolute; position: absolute;

4
packages/theme-chalk/src/option.scss
View File

@ -12,7 +12,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: map.get($select-option, 'color'); color: map.get($select-option, 'text-color');
height: map.get($select-option, 'height'); height: map.get($select-option, 'height');
line-height: map.get($select-option, 'height'); line-height: map.get($select-option, 'height');
box-sizing: border-box; box-sizing: border-box;
@ -33,7 +33,7 @@
} }
&.selected { &.selected {
color: map.get($select-option, 'selected-font-color'); color: map.get($select-option, 'selected-text-color');
font-weight: bold; font-weight: bold;
} }
} }

8
packages/theme-chalk/src/pagination.scss
View File

@ -10,7 +10,7 @@
white-space: nowrap; white-space: nowrap;
padding: 2px 5px; padding: 2px 5px;
color: var(--el-pagination-font-color); color: var(--el-pagination-text-color);
font-weight: bold; font-weight: bold;
@include utils-clearfix; @include utils-clearfix;
@ -62,7 +62,7 @@
&:disabled { &:disabled {
color: var(--el-pagination-button-disabled-color); color: var(--el-pagination-button-disabled-color);
background-color: var(--el-pagination-button-disabled-background-color); background-color: var(--el-pagination-button-disabled-bg-color);
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -71,7 +71,7 @@
.btn-next { .btn-next {
background: center center no-repeat; background: center center no-repeat;
background-size: 16px; background-size: 16px;
background-color: var(--el-pagination-background-color); background-color: var(--el-pagination-bg-color);
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
color: var(--el-pagination-button-color); color: var(--el-pagination-button-color);
@ -267,7 +267,7 @@
li { li {
padding: 0 4px; padding: 0 4px;
background: var(--el-pagination-background-color); background: var(--el-pagination-bg-color);
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
font-size: var(--el-pagination-font-size); font-size: var(--el-pagination-font-size);

4
packages/theme-chalk/src/popover.scss
View File

@ -6,7 +6,7 @@
@include set-component-css-var('popover', $popover); @include set-component-css-var('popover', $popover);
&.#{$namespace}-popper { &.#{$namespace}-popper {
background: var(--el-popover-background-color); background: var(--el-popover-bg-color);
min-width: 150px; min-width: 150px;
border-radius: var(--el-popover-border-radius); border-radius: var(--el-popover-border-radius);
border: 1px solid var(--el-popover-border-color); border: 1px solid var(--el-popover-border-color);
@ -24,7 +24,7 @@
} }
@include e(title) { @include e(title) {
color: var(--el-popover-title-font-color); color: var(--el-popover-title-text-color);
font-size: var(--el-popover-title-font-size); font-size: var(--el-popover-title-font-size);
line-height: 1; line-height: 1;
margin-bottom: 12px; margin-bottom: 12px;

19
packages/theme-chalk/src/radio-button.scss
View File

@ -20,14 +20,11 @@
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
background: var( background: var(--el-button-bg-color, map.get($button, 'bg-color'));
--el-button-background-color,
map.get($button, 'background-color')
);
border: $border-base; border: $border-base;
font-weight: var(--el-button-font-weight, map.get($button, 'font-weight')); font-weight: var(--el-button-font-weight, map.get($button, 'font-weight'));
border-left: 0; border-left: 0;
color: var(--el-button-font-color, map.get($button, 'font-color')); color: var(--el-button-text-color, map.get($button, 'text-color'));
-webkit-appearance: none; -webkit-appearance: none;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
@ -76,12 +73,12 @@
&:checked { &:checked {
& + .#{$namespace}-radio-button__inner { & + .#{$namespace}-radio-button__inner {
color: var( color: var(
--el-radio-button-checked-font-color, --el-radio-button-checked-text-color,
map.get($radio-button, 'checked-font-color') map.get($radio-button, 'checked-text-color')
); );
background-color: var( background-color: var(
--el-radio-button-checked-background-color, --el-radio-button-checked-bg-color,
map.get($radio-button, 'checked-background-color') map.get($radio-button, 'checked-bg-color')
); );
border-color: var( border-color: var(
--el-radio-button-checked-border-color, --el-radio-button-checked-border-color,
@ -104,8 +101,8 @@
cursor: not-allowed; cursor: not-allowed;
background-image: none; background-image: none;
background-color: var( background-color: var(
--el-button-disabled-background-color, --el-button-disabled-bg-color,
map.get($button, 'disabled-background-color') map.get($button, 'disabled-bg-color')
); );
border-color: var( border-color: var(
--el-button-disabled-border-color, --el-button-disabled-border-color,

6
packages/theme-chalk/src/radio.scss
View File

@ -11,7 +11,7 @@
} }
@include b(radio) { @include b(radio) {
color: var(--el-radio-font-color); color: var(--el-radio-text-color);
font-weight: var(--el-radio-font-weight); font-weight: var(--el-radio-font-weight);
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -121,7 +121,7 @@
} }
& + .#{$namespace}-radio__label { & + .#{$namespace}-radio__label {
color: map.get($radio-checked, 'font-color'); color: map.get($radio-checked, 'text-color');
} }
} }
@ -136,7 +136,7 @@
border-radius: var(--el-radio-input-border-radius); border-radius: var(--el-radio-input-border-radius);
width: var(--el-radio-input-width); width: var(--el-radio-input-width);
height: var(--el-radio-input-height); height: var(--el-radio-input-height);
background-color: var(--el-radio-input-background-color); background-color: var(--el-radio-input-bg-color);
position: relative; position: relative;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;

8
packages/theme-chalk/src/scrollbar.scss
View File

@ -33,16 +33,16 @@
cursor: pointer; cursor: pointer;
border-radius: inherit; border-radius: inherit;
background-color: var( background-color: var(
--el-scrollbar-background-color, --el-scrollbar-bg-color,
map.get($scrollbar, 'background-color') map.get($scrollbar, 'bg-color')
); );
transition: var(--el-transition-duration) background-color; transition: var(--el-transition-duration) background-color;
opacity: var(--el-scrollbar-opacity, map.get($scrollbar, 'opacity')); opacity: var(--el-scrollbar-opacity, map.get($scrollbar, 'opacity'));
&:hover { &:hover {
background-color: var( background-color: var(
--el-scrollbar-hover-background-color, --el-scrollbar-hover-bg-color,
map.get($scrollbar, 'hover-background-color') map.get($scrollbar, 'hover-bg-color')
); );
opacity: var( opacity: var(
--el-scrollbar-hover-opacity, --el-scrollbar-hover-opacity,

4
packages/theme-chalk/src/select-dropdown.scss
View File

@ -10,8 +10,8 @@
@include when(multiple) { @include when(multiple) {
& .#{$namespace}-select-dropdown__item.selected { & .#{$namespace}-select-dropdown__item.selected {
color: map.get($select-option, 'selected-font-color'); color: map.get($select-option, 'selected-text-color');
background-color: map.get($select-dropdown, 'background'); background-color: map.get($select-dropdown, 'bg-color');
&.hover { &.hover {
background-color: map.get($select-option, 'hover-background'); background-color: map.get($select-option, 'hover-background');

6
packages/theme-chalk/src/select-v2.scss
View File

@ -48,7 +48,7 @@ $input-inline-start: 15px !default;
@include when(disabled) { @include when(disabled) {
cursor: not-allowed; cursor: not-allowed;
background-color: var(--el-background-color-base); background-color: var(--el-bg-color-base);
color: var(--el-text-color-placeholder); color: var(--el-text-color-placeholder);
border-color: var(--el-select-disabled-border); border-color: var(--el-select-disabled-border);
@ -116,7 +116,7 @@ $input-inline-start: 15px !default;
@include e(popper) { @include e(popper) {
@include picker-popper( @include picker-popper(
map.get($select-dropdown, 'background'), map.get($select-dropdown, 'bg-color'),
map.get($select-dropdown, 'border'), map.get($select-dropdown, 'border'),
map.get($select-dropdown, 'shadow') map.get($select-dropdown, 'shadow')
); );
@ -315,7 +315,7 @@ $input-inline-start: 15px !default;
margin-inline-start: $input-inline-start; margin-inline-start: $input-inline-start;
width: calc(100% - 52px); width: calc(100% - 52px);
@include utils-ellipsis; @include utils-ellipsis;
color: var(--el-input-font-color, map.get($input, 'font-color')); color: var(--el-input-text-color, map.get($input, 'text-color'));
font-size: inherit; font-size: inherit;
@include when(transparent) { @include when(transparent) {
color: var(--el-text-color-placeholder); color: var(--el-text-color-placeholder);

2
packages/theme-chalk/src/select.scss
View File

@ -17,7 +17,7 @@
@include e(popper) { @include e(popper) {
@include picker-popper( @include picker-popper(
map.get($select-dropdown, 'background'), map.get($select-dropdown, 'bg-color'),
map.get($select-dropdown, 'border'), map.get($select-dropdown, 'border'),
map.get($select-dropdown, 'shadow') map.get($select-dropdown, 'shadow')
); );

8
packages/theme-chalk/src/slider.scss
View File

@ -16,7 +16,7 @@
width: 100%; width: 100%;
height: var(--el-slider-height); height: var(--el-slider-height);
margin: var(--el-slider-margin); margin: var(--el-slider-margin);
background-color: var(--el-slider-runway-background-color); background-color: var(--el-slider-runway-bg-color);
border-radius: var(--el-slider-border-radius); border-radius: var(--el-slider-border-radius);
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -88,7 +88,7 @@
@include e(bar) { @include e(bar) {
height: var(--el-slider-height); height: var(--el-slider-height);
background-color: var(--el-slider-main-background-color); background-color: var(--el-slider-main-bg-color);
border-top-left-radius: var(--el-slider-border-radius); border-top-left-radius: var(--el-slider-border-radius);
border-bottom-left-radius: var(--el-slider-border-radius); border-bottom-left-radius: var(--el-slider-border-radius);
position: absolute; position: absolute;
@ -123,7 +123,7 @@
width: var(--el-slider-button-size); width: var(--el-slider-button-size);
height: var(--el-slider-button-size); height: var(--el-slider-button-size);
vertical-align: middle; vertical-align: middle;
border: solid 2px var(--el-slider-main-background-color); border: solid 2px var(--el-slider-main-bg-color);
background-color: var(--el-color-white); background-color: var(--el-color-white);
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
@ -151,7 +151,7 @@
height: var(--el-slider-height); height: var(--el-slider-height);
width: var(--el-slider-height); width: var(--el-slider-height);
border-radius: var(--el-border-radius-circle); border-radius: var(--el-border-radius-circle);
background-color: var(--el-slider-stop-background-color); background-color: var(--el-slider-stop-bg-color);
transform: translateX(-50%); transform: translateX(-50%);
} }

32
packages/theme-chalk/src/table.scss
View File

@ -13,9 +13,9 @@
height: fit-content; height: fit-content;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
background-color: var(--el-table-background-color); background-color: var(--el-table-bg-color);
font-size: 14px; font-size: 14px;
color: var(--el-table-font-color); color: var(--el-table-text-color);
// when data is empty // when data is empty
@include e(empty-block) { @include e(empty-block) {
@ -61,7 +61,7 @@
} }
@include e(expanded-cell) { @include e(expanded-cell) {
background-color: var(--el-table-expanded-cell-background-color); background-color: var(--el-table-expanded-cell-bg-color);
// increase the weight purely // increase the weight purely
&[class*='cell'] { &[class*='cell'] {
@ -105,12 +105,12 @@
} }
thead { thead {
color: var(--el-table-header-font-color); color: var(--el-table-header-text-color);
font-weight: 500; font-weight: 500;
&.is-group { &.is-group {
th.#{$namespace}-table__cell { th.#{$namespace}-table__cell {
background: var(--el-background-color-base); background: var(--el-bg-color-base);
} }
} }
} }
@ -167,7 +167,7 @@
} }
tr { tr {
background-color: var(--el-table-tr-background-color); background-color: var(--el-table-tr-bg-color);
input[type='checkbox'] { input[type='checkbox'] {
margin: 0; margin: 0;
@ -186,7 +186,7 @@
th.#{$namespace}-table__cell { th.#{$namespace}-table__cell {
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
background-color: var(--el-table-header-background-color); background-color: var(--el-table-header-bg-color);
> .cell { > .cell {
display: inline-block; display: inline-block;
@ -324,7 +324,7 @@
position: absolute; position: absolute;
top: -1px; top: -1px;
right: 0; right: 0;
background-color: var(--el-table-header-background-color); background-color: var(--el-table-header-bg-color);
border-bottom: var(--el-table-border); border-bottom: var(--el-table-border);
} }
@ -356,8 +356,8 @@
& tbody td.#{$namespace}-table__cell { & tbody td.#{$namespace}-table__cell {
border-top: var(--el-table-border); border-top: var(--el-table-border);
background-color: var(--el-table-row-hover-background-color); background-color: var(--el-table-row-hover-bg-color);
color: var(--el-table-font-color); color: var(--el-table-text-color);
} }
} }
@ -389,8 +389,8 @@
overflow: hidden; overflow: hidden;
& tbody td.#{$namespace}-table__cell { & tbody td.#{$namespace}-table__cell {
background-color: var(--el-table-row-hover-background-color); background-color: var(--el-table-row-hover-bg-color);
color: var(--el-table-font-color); color: var(--el-table-text-color);
} }
} }
@ -484,7 +484,7 @@
} }
&.current-row td.#{$namespace}-table__cell { &.current-row td.#{$namespace}-table__cell {
background-color: var(--el-table-current-row-background-color); background-color: var(--el-table-current-row-bg-color);
} }
} }
} }
@ -497,14 +497,14 @@
&, &,
&.current-row { &.current-row {
> td.#{$namespace}-table__cell { > td.#{$namespace}-table__cell {
background-color: var(--el-table-row-hover-background-color); background-color: var(--el-table-row-hover-bg-color);
} }
} }
} }
} }
tr.current-row > td.#{$namespace}-table__cell { tr.current-row > td.#{$namespace}-table__cell {
background-color: var(--el-table-current-row-background-color); background-color: var(--el-table-current-row-bg-color);
} }
} }
@ -538,7 +538,7 @@
@include m(enable-row-hover) { @include m(enable-row-hover) {
.#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell { .#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell {
background-color: var(--el-table-row-hover-background-color); background-color: var(--el-table-row-hover-bg-color);
} }
} }

20
packages/theme-chalk/src/tag.scss
View File

@ -11,10 +11,10 @@
@mixin genTheme( @mixin genTheme(
$backgroundColorWeight, $backgroundColorWeight,
$borderColorWeight, $borderColorWeight,
$fontColorWeight, $textColorWeight,
$hoverColorWeight $hoverColorWeight
) { ) {
--el-tag-background-color: #{mix( --el-tag-bg-color: #{mix(
map.get($tag-color, 'primary'), map.get($tag-color, 'primary'),
$color-white, $color-white,
$backgroundColorWeight $backgroundColorWeight
@ -24,10 +24,10 @@
$color-white, $color-white,
$borderColorWeight $borderColorWeight
)}; )};
--el-tag-font-color: #{mix( --el-tag-text-color: #{mix(
map.get($tag-color, 'primary'), map.get($tag-color, 'primary'),
$color-white, $color-white,
$fontColorWeight $textColorWeight
)}; )};
--el-tag-hover-color: #{mix( --el-tag-hover-color: #{mix(
map.get($tag-color, 'primary'), map.get($tag-color, 'primary'),
@ -35,16 +35,16 @@
$hoverColorWeight $hoverColorWeight
)}; )};
background-color: var(--el-tag-background-color); background-color: var(--el-tag-bg-color);
border-color: var(--el-tag-border-color); border-color: var(--el-tag-border-color);
color: var(--el-tag-font-color); color: var(--el-tag-text-color);
@include when(hit) { @include when(hit) {
border-color: map.get($tag-color, 'primary'); border-color: map.get($tag-color, 'primary');
} }
.#{$namespace}-tag__close { .#{$namespace}-tag__close {
color: var(--el-tag-font-color); color: var(--el-tag-text-color);
&:hover { &:hover {
color: var(--el-color-white); color: var(--el-color-white);
background-color: var(--el-tag-hover-color); background-color: var(--el-tag-hover-color);
@ -53,7 +53,7 @@
@each $type in $types { @each $type in $types {
&.#{$namespace}-tag--#{$type} { &.#{$namespace}-tag--#{$type} {
--el-tag-background-color: #{mix( --el-tag-bg-color: #{mix(
map.get($tag-color, $type), map.get($tag-color, $type),
$color-white, $color-white,
$backgroundColorWeight $backgroundColorWeight
@ -63,10 +63,10 @@
$color-white, $color-white,
$borderColorWeight $borderColorWeight
)}; )};
--el-tag-font-color: #{mix( --el-tag-text-color: #{mix(
map.get($tag-color, $type), map.get($tag-color, $type),
$color-white, $color-white,
$fontColorWeight $textColorWeight
)}; )};
--el-tag-hover-color: #{mix( --el-tag-hover-color: #{mix(
map.get($tag-color, $type), map.get($tag-color, $type),

2
packages/theme-chalk/src/transfer.scss
View File

@ -140,7 +140,7 @@
.#{$namespace}-transfer-panel__header { .#{$namespace}-transfer-panel__header {
height: var(--el-transfer-panel-header-height); height: var(--el-transfer-panel-header-height);
line-height: var(--el-transfer-panel-header-height); line-height: var(--el-transfer-panel-header-height);
background: var(--el-transfer-panel-header-background-color); background: var(--el-transfer-panel-header-bg-color);
margin: 0; margin: 0;
padding-left: 15px; padding-left: 15px;
border-bottom: 1px solid var(--el-transfer-border-color); border-bottom: 1px solid var(--el-transfer-border-color);

6
packages/theme-chalk/src/tree.scss
View File

@ -11,7 +11,7 @@
position: relative; position: relative;
cursor: default; cursor: default;
background: var(--el-color-white); background: var(--el-color-white);
color: var(--el-tree-font-color); color: var(--el-tree-text-color);
@include e(empty-block) { @include e(empty-block) {
position: relative; position: relative;
@ -45,7 +45,7 @@
&:focus { &:focus {
/* focus */ /* focus */
> .#{$namespace}-tree-node__content { > .#{$namespace}-tree-node__content {
background-color: var(--el-tree-node-hover-background-color); background-color: var(--el-tree-node-hover-bg-color);
} }
} }
@ -69,7 +69,7 @@
margin-right: 8px; margin-right: 8px;
} }
&:hover { &:hover {
background-color: var(--el-tree-node-hover-background-color); background-color: var(--el-tree-node-hover-bg-color);
} }
.#{$namespace}-tree.is-dragging & { .#{$namespace}-tree.is-dragging & {

6
packages/theme-chalk/src/var.scss
View File

@ -35,7 +35,7 @@
} }
// Background // Background
--el-background-color-base: #{$background-color-base}; --el-bg-color-base: #{$background-color-base};
// Border // Border
--el-border-width-base: #{$border-width-base}; --el-border-width-base: #{$border-width-base};
@ -68,7 +68,7 @@
--el-font-weight-primary: 500; --el-font-weight-primary: 500;
--el-font-line-height-primary: 24px; --el-font-line-height-primary: 24px;
--el-font-color-disabled-base: #bbb; --el-text-color-disabled-base: #bbb;
// z-index // z-index
--el-index-normal: 1; --el-index-normal: 1;
@ -76,7 +76,7 @@
--el-index-popper: 2000; --el-index-popper: 2000;
// Disable base // Disable base
--el-disabled-fill-base: var(--el-background-color-base); --el-disabled-fill-base: var(--el-bg-color-base);
--el-disabled-color-base: var(--el-text-color-placeholder); --el-disabled-color-base: var(--el-text-color-placeholder);
--el-disabled-border-base: var(--el-border-color-light); --el-disabled-border-base: var(--el-border-color-light);