test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 19:28:14 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(theme-chalk): rewrite palette & remove -base suffix (#6593)

Browse Source 
* refactor(theme-chalk): rewrite palette & remove -base suffix

* refactor(theme-chalk): container as default bg-color

* refactor(theme-chalk): add fill-color-blank

* fix(docs): fill-color-light for code-bg
This commit is contained in:
云游君 2022-03-13 20:10:07 +08:00 committed by GitHub
parent 7cdee1bec5
commit 06f6844509
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 176 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/.vitepress/vitepress/components/globals/icons.vue
View File

@ -71,8 +71,8 @@ const copySvgIcon = async (name, refs) => {
overflow: hidden;
list-style: none;
padding: 0 !important;
border-top: 1px solid var(--el-border-color-base);
border-left: 1px solid var(--el-border-color-base);
border-top: 1px solid getCssVar('border-color');
border-left: 1px solid getCssVar('border-color');
border-radius: 4px;
display: grid;
grid-template-columns: repeat(7, 1fr);
@ -82,8 +82,8 @@ const copySvgIcon = async (name, refs) => {
color: var(--el-text-color-regular);
height: 90px;
font-size: 13px;
border-right: 1px solid var(--el-border-color-base);
border-bottom: 1px solid var(--el-border-color-base);
border-right: 1px solid getCssVar('border-color');
border-bottom: 1px solid getCssVar('border-color');
transition: background-color var(--el-transition-duration);
&:hover {
background-color: var(--el-border-color-extra-light);

2
docs/.vitepress/vitepress/styles/scrollbar.scss
View File

@ -1,6 +1,6 @@
// scrollbar
* {
scrollbar-color: var(--el-scrollbar-bg-color) var(--el-bg-color);
scrollbar-color: var(--el-scrollbar-bg-color) var(--el-fill-color-light);
}
::-webkit-scrollbar {

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

@ -11,7 +11,7 @@
--bg-color: var(--el-color-white);
--bg-color-soft: #fafafa;
--bg-color-mute: #f2f2f2;
--border-color: var(--el-border-color-base);
--border-color: var(--el-border-color);
--border-color-light: var(--el-border-color-lighter);
--font-family: Inter, Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
@ -42,7 +42,7 @@
// code block vars
--code-line-height: 1.4;
--code-font-size: var(--el-font-size-base);
--code-bg-color: var(--el-bg-color);
--code-bg-color: var(--el-fill-color-light);
--code-text-color: var(--text-color);
--code-font-family: var(--font-family-mono);

4
docs/examples/avatar/basic.vue
View File

@ -54,12 +54,12 @@ const { circleUrl, squareUrl, sizeList } = toRefs(state)
align-items: center;
}
.demo-basic .block:not(:last-child) {
border-right: 1px solid var(--el-border-color-base);
border-right: 1px solid getCssVar('border-color');
}
.demo-basic .block {
flex: 1;
}
.demo-basic .el-col:not(:last-child) {
border-right: 1px solid var(--el-border-color-base);
border-right: 1px solid getCssVar('border-color');
}
</style>

2
docs/examples/avatar/types.vue
View File

@ -28,6 +28,6 @@ import { UserFilled } from '@element-plus/icons-vue'
}
.demo-type > div:not(:last-child) {
border-right: 1px solid var(--el-border-color-base);
border-right: 1px solid getCssVar('border-color');
}
</style>

4
docs/examples/border/border.vue
View File

@ -33,9 +33,9 @@
.demo-border .line div {
width: 100%;
height: 0;
border-top: 1px solid var(--el-border-color-base);
border-top: 1px solid getCssVar('border-color');
}
.demo-border .line .dashed {
border-top: 2px dashed var(--el-border-color-base);
border-top: 2px dashed getCssVar('border-color');
}
</style>

2
docs/examples/border/radius.vue
View File

@ -66,7 +66,7 @@ const getValue = (type: string) => {
.demo-radius .radius {
height: 40px;
width: 70%;
border: 1px solid var(--el-border-color-base);
border: 1px solid getCssVar('border-color');
border-radius: 0;
margin-top: 20px;
}

2
docs/examples/date-picker/custom-prefix-icon.vue
View File

@ -34,7 +34,7 @@ const customPrefix = shallowRef({
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-date-picker .block:last-child {

2
docs/examples/date-picker/date-formats.vue
View File

@ -55,7 +55,7 @@ const value3 = ref('')
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-date-picker .block:last-child {

2
docs/examples/date-picker/date-range.vue
View File

@ -73,7 +73,7 @@ const shortcuts = [
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-date-picker .block:last-child {

2
docs/examples/date-picker/default-time.vue
View File

@ -32,7 +32,7 @@ const defaultTime = ref([
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-date-picker .block:last-child {

2
docs/examples/date-picker/default-value.vue
View File

@ -40,7 +40,7 @@ const value2 = ref('')
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-date-picker .block:last-child {

2
docs/examples/date-picker/enter-date.vue
View File

@ -62,7 +62,7 @@ const disabledDate = (time: Date) => {
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-date-picker .block:last-child {

2
docs/examples/date-picker/month-range.vue
View File

@ -67,7 +67,7 @@ const shortcuts = [
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-date-picker .block:last-child {

6
docs/examples/date-picker/other-measurements.vue
View File

@ -58,7 +58,7 @@ const value4 = ref('')
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-date-picker .block:last-child {
@ -67,13 +67,13 @@ const value4 = ref('')
.demo-date-picker .container {
flex: 1;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
}
.demo-date-picker .container .block {
border-right: none;
}
.demo-date-picker .container .block:last-child {
border-top: solid 1px var(--el-border-color-base);
border-top: solid 1px getCssVar('border-color');
}
.demo-date-picker .container:last-child {
border-right: none;

2
docs/examples/datetime-picker/date-and-time-formats.vue
View File

@ -55,7 +55,7 @@ const value3 = ref('')
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-datetime-picker .block:last-child {

2
docs/examples/datetime-picker/date-and-time-range.vue
View File

@ -67,7 +67,7 @@ const shortcuts = [
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.block:last-child {

2
docs/examples/datetime-picker/date-and-time.vue
View File

@ -73,7 +73,7 @@ const shortcuts = [
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.demo-datetime-picker .block:last-child {

2
docs/examples/datetime-picker/default-time.vue
View File

@ -41,7 +41,7 @@ const defaultTime2 = [
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
flex: 1;
}
.block:last-child {

2
docs/examples/image/basic-usage.vue
View File

@ -21,7 +21,7 @@ const url =
.demo-image .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
display: inline-block;
width: 20%;
box-sizing: border-box;

2
docs/examples/image/load-failed.vue
View File

@ -25,7 +25,7 @@ import { Picture as IconPicture } from '@element-plus/icons-vue'
.demo-image__error .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
display: inline-block;
width: 49%;
box-sizing: border-box;

2
docs/examples/image/placeholder.vue
View File

@ -24,7 +24,7 @@ const src =
.demo-image__placeholder .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
display: inline-block;
width: 49%;
box-sizing: border-box;

2
docs/examples/rate/basic-usage.vue
View File

@ -21,7 +21,7 @@ const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF',
.demo-rate-block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
border-right: solid 1px getCssVar('border-color');
display: inline-block;
width: 49%;
box-sizing: border-box;

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

@ -31,7 +31,7 @@ $button-icon-span-gap: map.merge(
white-space: nowrap;
cursor: pointer;
background-color: var(--el-button-bg-color, #{map.get($button, 'bg-color')});
border: var(--el-border-base);
border: var(--el-border);
border-color: var(
--el-button-border-color,
#{map.get($button, 'border-color')}

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

@ -210,7 +210,7 @@
flex: 1;
height: 24px;
min-width: 60px;
margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width-base;
margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
padding: 0;
color: var(--el-cascader-menu-text-color);
border: none;

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

@ -22,7 +22,7 @@
vertical-align: middle;
cursor: pointer;
background: var(--el-button-bg-color, map.get($button, 'bg-color'));
border: $border-base;
border: getCssVar('border');
border-left: 0;
color: var(--el-button-text-color, map.get($button, 'text-color'));
-webkit-appearance: none;
@ -102,7 +102,7 @@
&:first-child {
.#{$namespace}-checkbox-button__inner {
border-left: $border-base;
border-left: getCssVar('border');
border-radius: var(--el-border-radius-base) 0 0
var(--el-border-radius-base);
box-shadow: none !important;

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

@ -52,10 +52,10 @@ $checkbox-bordered-input-width: map.merge(
height: map.get($checkbox-height, 'default');
@include when(bordered) {
padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
border-radius: var(--el-border-radius-base);
border: var(--el-border-base);
border: var(--el-border);
box-sizing: border-box;
&.is-checked {
@ -70,9 +70,9 @@ $checkbox-bordered-input-width: map.merge(
@each $size in (large, small) {
&.#{$namespace}-checkbox--#{$size} {
padding: 0
map.get($checkbox-bordered-padding-right, $size)-$border-width-base
map.get($checkbox-bordered-padding-right, $size)-$border-width
0
map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
map.get($checkbox-bordered-padding-left, $size)-$border-width;
border-radius: map.get($button-border-radius, $size);

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

@ -13,7 +13,7 @@
@include b(collapse-item) {
@include when(disabled) {
.#{$namespace}-collapse-item__header {
color: var(--el-text-color-disabled-base);
color: var(--el-text-color-disabled);
cursor: not-allowed;
}
}

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

@ -2,6 +2,8 @@
@use 'sass:math';
@use 'sass:map';
@use '../mixins/function.scss' as *;
// Special comment for theme configurator
// type|skipAutoTranslation|Category|Order
// skipAutoTranslation 1
@ -108,7 +110,8 @@ $text-color: map.merge(
'primary': #303133,
'regular': #606266,
'secondary': #909399,
'placeholder': #c0c4cc,
'placeholder': #a8abb2,
'disable': #c0c4cc,
),
$text-color
);
@ -116,25 +119,46 @@ $text-color: map.merge(
$border-color: () !default;
$border-color: map.merge(
(
'base': #dcdfe6,
'': #dcdfe6,
'light': #e4e7ed,
'lighter': #ebeef5,
'extra-light': #f2f6fc,
'dark': #d4d7de,
'darker': #cdd0d6,
),
$border-color
);
$fill-color: () !default;
$fill-color: map.merge(
(
'': #f0f2f5,
'light': #f5f7fa,
'lighter': #fafafa,
'extra-light': #fafcff,
'dark': #ebedf0,
'darker': #e6e8eb,
'blank': #ffffff,
),
$fill-color
);
// Background
/// color|1|Background Color|4
$bg-color: #f5f7fa !default;
$bg-color: () !default;
$bg-color: map.merge(
(
'': #ffffff,
'page': #ffffff,
'overlay': #ffffff,
),
$bg-color
);
// Border
$border-width-base: 1px !default;
$border-style-base: solid !default;
$border-width: 1px !default;
$border-style: solid !default;
$border-color-hover: var(--el-text-color-placeholder) !default;
$border-base: $border-width-base $border-style-base
map.get($border-color, 'base') !default;
/// borderRadius|1|Radius|0
$border-radius: () !default;
$border-radius: map.merge(
@ -174,11 +198,22 @@ $font-size: map.merge(
$font-size
);
// zIndex
$z-index: () !default;
$z-index: map.merge(
(
'normal': 1,
'top': 1000,
'popper': 2000,
),
$z-index
);
// Disable default
$disabled: () !default;
$disabled: map.merge(
(
'bg-color': var(--el-bg-color),
'bg-color': getCssVar('fill-color', 'light'),
'text-color': var(--el-text-color-placeholder),
'border-color': var(--el-border-color-light),
),
@ -195,6 +230,8 @@ $common-component-size: map.merge(
$common-component-size
);
// Components
// ---
// Checkbox
// css3 var in packages/theme-chalk/src/checkbox.scss
$checkbox: () !default;
@ -207,17 +244,17 @@ $checkbox: map.merge(
'input-width': 14px,
'border-radius': var(--el-border-radius-small),
'bg-color': var(--el-color-white),
'input-border': var(--el-border-base),
'disabled-border-color': var(--el-border-color-base),
'input-border': var(--el-border),
'disabled-border-color': getCssVar('border-color'),
'disabled-input-fill': #edf2fc,
'disabled-icon-color': var(--el-text-color-placeholder),
'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': getCssVar('border-color'),
'disabled-checked-icon-color': var(--el-text-color-placeholder),
'checked-text-color': var(--el-color-primary),
'checked-input-border-color': var(--el-color-primary),
'checked-bg-color': var(--el-color-primary),
'checked-icon-color': var(--el-fill-base),
'checked-icon-color': getCssVar('fill-color'),
'input-border-color-hover': var(--el-color-primary),
),
$checkbox
@ -265,8 +302,8 @@ $radio: map.merge(
'input-width': 14px,
'input-border-radius': var(--el-border-radius-circle),
'input-bg-color': var(--el-color-white),
'input-border': var(--el-border-base),
'input-border-color': var(--el-border-color-base),
'input-border': var(--el-border),
'input-border-color': getCssVar('border-color'),
'input-border-color-hover': var(--el-color-primary),
),
$radio
@ -351,7 +388,7 @@ $select-option: map.merge(
'text-color': var(--el-text-color-regular),
'disabled-color': var(--el-text-color-placeholder),
'height': 34px,
'hover-background': var(--el-bg-color),
'hover-background': getCssVar('fill-color', 'light'),
'selected-text-color': var(--el-color-primary),
),
$select-option
@ -472,11 +509,11 @@ $input: () !default;
$input: map.merge(
(
'text-color': var(--el-text-color-regular),
'border': var(--el-border-base),
'border': var(--el-border),
'hover-border': var(--el-border-color-hover),
'focus-border': var(--el-color-primary),
'transparent-border': 0 0 0 1px transparent inset,
'border-color': var(--el-border-color-base),
'border-color': getCssVar('border-color'),
'border-radius': var(--el-border-radius-base),
'bg-color': var(--el-color-white),
'icon-color': var(--el-text-color-placeholder),
@ -542,12 +579,12 @@ $cascader: map.merge(
(
'menu-text-color': var(--el-text-color-regular),
'menu-selected-text-color': var(--el-color-primary),
'menu-fill': var(--el-fill-base),
'menu-fill': getCssVar('fill-color'),
'menu-font-size': var(--el-font-size-base),
'menu-radius': var(--el-border-radius-base),
'menu-border': solid 1px var(--el-border-color-light),
'menu-shadow': var(--el-box-shadow-light),
'node-background-hover': var(--el-bg-color),
'node-background-hover': getCssVar('fill-color', 'light'),
'node-color-disabled': var(--el-text-color-placeholder),
'color-empty': var(--el-text-color-placeholder),
'tag-background': #f0f2f5,
@ -561,7 +598,7 @@ $button: () !default;
$button: map.merge(
(
'font-weight': var(--el-font-weight-primary),
'border-color': var(--el-border-color-base),
'border-color': getCssVar('border-color'),
'bg-color': var(--el-color-white),
'text-color': var(--el-text-color-regular),
'disabled-text-color': var(--el-disabled-text-color),
@ -578,7 +615,7 @@ $button: map.merge(
$button
);
$button-border-width: $border-width-base !default;
$button-border-width: $border-width !default;
// need mix, so do not use css var
$button-hover-tint-percent: 20%;
@ -650,7 +687,7 @@ $switch: () !default;
$switch: map.merge(
(
'on-color': var(--el-color-primary),
'off-color': var(--el-border-color-base),
'off-color': getCssVar('border-color'),
'core-border-radius': 10px,
'width': 40px,
'height': 20px,
@ -686,7 +723,7 @@ $table: map.merge(
'border': 1px solid var(--el-table-border-color),
'text-color': var(--el-text-color-regular),
'header-text-color': var(--el-text-color-secondary),
'row-hover-bg-color': var(--el-bg-color),
'row-hover-bg-color': getCssVar('fill-color', 'light'),
'current-row-bg-color': var(--el-color-primary-light-9),
'header-bg-color': var(--el-color-white),
'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
@ -844,7 +881,7 @@ $tag-icon-size: map.merge(
$tree: () !default;
$tree: map.merge(
(
'node-hover-bg-color': var(--el-bg-color),
'node-hover-bg-color': getCssVar('fill-color', 'light'),
'text-color': var(--el-text-color-regular),
'expand-icon-color': var(--el-text-color-placeholder),
),
@ -1060,7 +1097,7 @@ $transfer: map.merge(
'border-radius': var(--el-border-radius-base),
'panel-width': 200px,
'panel-header-height': 40px,
'panel-header-bg-color': var(--el-bg-color),
'panel-header-bg-color': getCssVar('fill-color', 'light'),
'panel-footer-height': 40px,
'panel-body-height': 278px,
'item-height': 30px,

6
packages/theme-chalk/src/dark/vars.scss
View File

@ -1,6 +1,4 @@
html.dark {
--el-bg-color: #1a1a1a;
// border
--el-border-color-base: #434343;
// todo dark.scss
--el-bg-color: #141414;
}

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

@ -113,7 +113,7 @@
}
&.disabled .#{$namespace}-date-table-cell {
background-color: var(--el-bg-color);
background-color: getCssVar('fill-color', 'light');
opacity: 1;
cursor: not-allowed;
color: var(--el-text-color-placeholder);

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

@ -27,7 +27,7 @@
}
&.disabled .cell {
background-color: var(--el-bg-color);
background-color: getCssVar('fill-color', 'light');
cursor: not-allowed;
color: var(--el-text-color-placeholder);

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

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

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

@ -95,7 +95,7 @@
color: var(--el-text-color-regular);
&:hover:not(.disabled):not(.active) {
background: var(--el-bg-color);
background: getCssVar('fill-color', 'light');
cursor: pointer;
}

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

@ -23,7 +23,7 @@
}
&.disabled .cell {
background-color: var(--el-bg-color);
background-color: getCssVar('fill-color', 'light');
cursor: not-allowed;
color: var(--el-text-color-placeholder);

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

@ -9,7 +9,7 @@
height: 1px;
width: 100%;
margin: 24px 0;
border-top: 1px var(--el-border-color-base) var(--el-border-style);
border-top: 1px getCssVar('border-color') var(--el-border-style);
}
@include m(vertical) {
@ -19,7 +19,7 @@
margin: 0 8px;
vertical-align: middle;
position: relative;
border-left: 1px var(--el-border-color-base) var(--el-border-style);
border-left: 1px getCssVar('border-color') var(--el-border-style);
}
@include e(text) {

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

@ -112,7 +112,7 @@ $dropdown-divider-width: 1px !default;
}
&.#{$namespace}-button::before {
background: var(--el-border-color-base);
background: getCssVar('border-color');
opacity: 0.5;
}
@ -158,8 +158,7 @@ $dropdown-menu-padding-vertical: map.merge(
top: 0;
left: 0;
z-index: var(--el-dropdown-menu-index);
padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width-base
0;
padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
margin: 0;
background-color: $color-white;
border: none;
@ -195,14 +194,13 @@ $dropdown-menu-padding-vertical: map.merge(
@include when(disabled) {
cursor: not-allowed;
color: var(--el-text-color-disabled-base);
color: var(--el-text-color-disabled);
}
}
@each $size in (large, small) {
@include m($size) {
padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width-base
0;
padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;
@include e(item) {
padding: map.get($dropdown-item-padding, $size);

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

@ -18,7 +18,7 @@
@include e(placeholder) {
@extend %size !optional;
background: var(--el-bg-color);
background: getCssVar('fill-color', 'light');
}
@include e(error) {
@ -27,7 +27,7 @@
justify-content: center;
align-items: center;
font-size: 14px;
background: var(--el-bg-color);
background: getCssVar('fill-color', 'light');
color: var(--el-text-color-placeholder);
vertical-align: middle;
}

10
packages/theme-chalk/src/input-number.scss
View File

@ -39,7 +39,7 @@
bottom: 1px;
width: map.get($input-height, 'default');
background: var(--el-bg-color);
background: getCssVar('fill-color', 'light');
color: var(--el-text-color-regular);
cursor: pointer;
font-size: 13px;
@ -67,13 +67,13 @@
@include e(increase) {
right: 1px;
border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
border-left: var(--el-border-base);
border-left: var(--el-border);
}
@include e(decrease) {
left: 1px;
border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
border-right: var(--el-border-base);
border-right: var(--el-border);
}
@include when(disabled) {
@ -144,7 +144,7 @@
bottom: auto;
left: auto;
border-radius: 0 var(--el-border-radius-base) 0 0;
border-bottom: var(--el-border-base);
border-bottom: var(--el-border);
}
@include e(decrease) {
@ -152,7 +152,7 @@
top: auto;
left: auto;
border-right: none;
border-left: var(--el-border-base);
border-left: var(--el-border);
border-radius: 0 0 var(--el-border-radius-base) 0;
}

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

@ -166,7 +166,7 @@
height: map.get($input-height, 'default');
line-height: map.get($input-height, 'default');
outline: none;
padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
padding: 0 map.get($input-padding-horizontal, 'default')-$border-width;
transition: var(--el-transition-box-shadow);
width: 100%;
@include inset-input-border(
@ -311,7 +311,7 @@
@include e(inner) {
height: map.get($input-height, $size);
line-height: map.get($input-height, $size);
padding: 0 map.get($input-padding-horizontal, $size)-$border-width-base;
padding: 0 map.get($input-padding-horizontal, $size)-$border-width;
}
.#{$namespace}-input__icon {
@ -361,7 +361,7 @@
}
@include e((append, prepend)) {
background-color: var(--el-bg-color);
background-color: getCssVar('fill-color', 'light');
color: var(--el-color-info);
vertical-align: middle;
display: table-cell;

2
packages/theme-chalk/src/page-header.scss
View File

@ -19,7 +19,7 @@
right: -20px;
top: 50%;
transform: translateY(-50%);
background-color: var(--el-border-color-base);
background-color: getCssVar('border-color');
}
@include e(icon) {

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

@ -21,7 +21,7 @@
white-space: nowrap;
vertical-align: middle;
background: var(--el-button-bg-color, map.get($button, 'bg-color'));
border: $border-base;
border: getCssVar('border');
font-weight: var(--el-button-font-weight, map.get($button, 'font-weight'));
border-left: 0;
color: var(--el-button-text-color, map.get($button, 'text-color'));
@ -57,7 +57,7 @@
&:first-child {
.#{$namespace}-radio-button__inner {
border-left: $border-base;
border-left: getCssVar('border');
border-radius: var(--el-border-radius-base) 0 0
var(--el-border-radius-base);
box-shadow: none !important;

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

@ -41,11 +41,11 @@ $radio-font-size: map.merge(
}
@include when(bordered) {
padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
border-radius: var(--el-border-radius-base);
border: var(--el-border-base);
border: var(--el-border);
box-sizing: border-box;
&.is-checked {
@ -60,9 +60,9 @@ $radio-font-size: map.merge(
@each $size in (large, small) {
&.#{$namespace}-radio--#{$size} {
padding: 0
map.get($checkbox-bordered-padding-right, $size)-$border-width-base
map.get($checkbox-bordered-padding-right, $size)-$border-width
0
map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
map.get($checkbox-bordered-padding-left, $size)-$border-width;
border-radius: var(--el-border-radius-base);
.#{$namespace}-radio__label {

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

@ -29,7 +29,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
box-sizing: border-box;
cursor: pointer;
padding: 1px 30px 1px 0;
border: 1px solid var(--el-border-color-base);
border: 1px solid getCssVar('border-color');
border-radius: var(--el-border-radius-base);
transition: border-color var(--el-transition-duration-fast)
var(--el-ease-in-out-bezier-function);
@ -54,7 +54,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
@include when(disabled) {
cursor: not-allowed;
background-color: var(--el-bg-color);
background-color: getCssVar('fill-color', 'light');
color: var(--el-text-color-placeholder);
border-color: var(--el-select-disabled-border);

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

@ -7,7 +7,7 @@
@include m(simple) {
padding: 13px 8%;
border-radius: 4px;
background: var(--el-bg-color);
background: getCssVar('fill-color', 'light');
}
@include m(horizontal) {

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

@ -122,7 +122,7 @@
&.is-group {
th.#{$namespace}-table__cell {
background: var(--el-bg-color);
background: getCssVar('fill-color', 'light');
}
}
}

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

@ -224,14 +224,14 @@
}
@include m(border-card) {
background: $color-white;
border: 1px solid var(--el-border-color-base);
border: 1px solid getCssVar('border-color');
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
> .#{$namespace}-tabs__content {
padding: 15px;
}
> .#{$namespace}-tabs__header {
background-color: var(--el-bg-color);
background-color: getCssVar('fill-color', 'light');
border-bottom: 1px solid var(--el-border-color-light);
margin: 0;
}
@ -256,8 +256,8 @@
&.is-active {
color: var(--el-color-primary);
background-color: $color-white;
border-right-color: var(--el-border-color-base);
border-left-color: var(--el-border-color-base);
border-right-color: getCssVar('border-color');
border-left-color: getCssVar('border-color');
}
&:not(.is-disabled):hover {
color: var(--el-color-primary);
@ -305,7 +305,7 @@
&.#{$namespace}-tabs--border-card {
.#{$namespace}-tabs__header.is-bottom {
border-bottom: 0;
border-top: 1px solid var(--el-border-color-base);
border-top: 1px solid getCssVar('border-color');
}
.#{$namespace}-tabs__nav-wrap.is-bottom {
margin-top: -1px;

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

@ -96,7 +96,7 @@ $tag-icon-span-gap: map.merge(
align-items: center;
height: map.get($tag-height, 'default');
padding: 0 map.get($tag-padding, 'default') - $border-width-base;
padding: 0 map.get($tag-padding, 'default') - $border-width;
font-size: var(--el-tag-font-size);
line-height: 1;
border-width: $tag-border-width;
@ -130,7 +130,7 @@ $tag-icon-span-gap: map.merge(
}
&.is-closable {
padding-right: map.get($tag-icon-span-gap, 'default') - $border-width-base;
padding-right: map.get($tag-icon-span-gap, 'default') - $border-width;
}
@each $size in (large, default, small) {
@ -145,7 +145,7 @@ $tag-icon-span-gap: map.merge(
}
&.is-closable {
padding-right: map.get($tag-icon-span-gap, $size) - $border-width-base;
padding-right: map.get($tag-icon-span-gap, $size) - $border-width;
}
}
}

3
packages/theme-chalk/src/time-select.scss
View File

@ -1,4 +1,5 @@
@use 'mixins/config' as *;
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@use './date-picker/picker.scss';
@use './date-picker/date-picker.scss';
@ -23,7 +24,7 @@
}
&:hover {
background-color: var(--el-bg-color);
background-color: getCssVar('fill-color', 'light');
font-weight: bold;
cursor: pointer;
}

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

@ -86,7 +86,7 @@
}
~ .#{bem('upload', 'files')} {
border-top: $border-base;
border-top: getCssVar('border');
margin-top: 7px;
padding-top: 5px;
}
@ -177,7 +177,7 @@
}
&:hover {
background-color: var(--el-bg-color);
background-color: getCssVar('fill-color', 'light');
.#{bem('icon', '', 'close')} {
display: inline-flex;

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

@ -9,6 +9,8 @@
// https://lisilinhart.info/posts/css-variables-performance/
:root {
color-scheme: light;
--el-color-white: #{$color-white};
--el-color-black: #{$color-black};
@ -30,45 +32,40 @@
@include set-css-color-type($type);
}
// Background
--el-bg-color: #{$bg-color};
// Border
--el-border-width-base: #{$border-width-base};
--el-border-style-base: #{$border-style-base};
--el-border-color-hover: #{$border-color-hover};
--el-border-base: var(--el-border-width-base) var(--el-border-style-base)
var(--el-border-color-base);
// Svg
--el-svg-monochrome-grey: #dcdde0;
// Fill
--el-fill-base: var(--el-color-white);
// Typography
@include set-component-css-var('font-size', $font-size);
--el-font-weight-primary: 500;
--el-font-line-height-primary: 24px;
--el-text-color-disabled-base: #bbb;
// z-index
--el-index-normal: 1;
--el-index-top: 1000;
--el-index-popper: 2000;
// Background --el-bg-color-#{$type}
@include set-component-css-var('bg-color', $bg-color);
// --el-text-color-#{$type}
@include set-component-css-var('text-color', $text-color);
// --el-border-color-#{$type}
@include set-component-css-var('border-color', $border-color);
// --el-border-radius-#{$type}
@include set-component-css-var('border-radius', $border-radius);
// Fill --el-fill-color-#{$type}
@include set-component-css-var('fill-color', $fill-color);
// Typography
@include set-component-css-var('font-size', $font-size);
// Box-shadow
// --el-box-shadow-#{$type}
@include set-component-css-var('box-shadow', $box-shadow);
// Disable base
@include set-component-css-var('disabled', $disabled);
// z-index --el-index-#{$type}
@include set-component-css-var('index', $z-index);
// Border
--el-border-width: #{$border-width};
--el-border-style: #{$border-style};
--el-border-color-hover: #{$border-color-hover};
--el-border: var(--el-border-width) var(--el-border-style)
var(--el-border-color);
// Svg
--el-svg-monochrome-grey: #dcdde0;
--el-font-weight-primary: 500;
--el-font-line-height-primary: 24px;
// z-index
/* Transition
-------------------------- */