mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-04-06 16:30:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme-chalk): dark bg color overlay for components (#7005)

Browse Source 
* feat(theme-chalk): dark bg color overlay for components

* fix(theme-chalk): details of components

* fix(theme-chalk): box-shadow
This commit is contained in:
云游君 2022-04-10 13:47:19 +08:00 committed by GitHub
parent 8dfcc278d6
commit ee91b01400
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 117 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/.vitepress/vitepress/components/globals/main-color.vue
View File

@ -10,7 +10,7 @@
:key="level"
class="bg-blue-sub-item hover:(cursor-pointer shadow)"
:style="{
width: `${100 / 10}%`,
width: `${100 / 5}%`,
background: getColorValue('primary-' + level),
}"
@click="copyColor('primary-' + level)"
@ -26,9 +26,7 @@ import { useCssVar } from '@vueuse/core'
import { getColorValue, useCopyColor } from '../../utils'
const primary = useCssVar('--el-color-primary')
const colorLevel = [...Array.from({ length: 10 }).keys()].map(
(i) => `light-${i + 1}`
)
const colorLevel = [3, 5, 7, 8, 9].map((i) => `light-${i}`)
colorLevel.unshift('dark-2')
const { copyColor } = useCopyColor()

2
docs/examples/backtop/custom.vue
View File

@ -5,7 +5,7 @@
style="
height: 100%;
width: 100%;
background-color: #f2f5f6;
background-color: var(--el-bg-color-overlay);
box-shadow: var(--el-box-shadow-lighter);
text-align: center;
line-height: 40px;

2
packages/components/progress/src/progress.vue
View File

@ -46,7 +46,7 @@
<path
:class="ns.be('circle', 'track')"
:d="trackPath"
stroke="#e5e9f2"
stroke="var(--el-fill-color-light, #e5e9f2)"
:stroke-width="relativeStrokeWidth"
fill="none"
:style="trailPathStyle"

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

@ -8,17 +8,17 @@
@include set-component-css-var('alert', $alert);
width: 100%;
padding: var(--el-alert-padding);
padding: getCssVar('alert', 'padding');
margin: 0;
box-sizing: border-box;
border-radius: var(--el-alert-border-radius-base);
border-radius: getCssVar('alert', 'border-radius-base');
position: relative;
background-color: var(--el-color-white);
background-color: getCssVar('color', 'white');
overflow: hidden;
opacity: 1;
display: flex;
align-items: center;
transition: opacity var(--el-transition-duration-fast);
transition: opacity getCssVar('transition-duration', 'fast');
@include when(light) {
.#{$namespace}-alert__close-btn {
@ -28,10 +28,10 @@
@include when(dark) {
.#{$namespace}-alert__close-btn {
color: var(--el-color-white);
color: getCssVar('color', 'white');
}
.#{$namespace}-alert__description {
color: var(--el-color-white);
color: getCssVar('color', 'white');
}
}
@ -41,20 +41,23 @@
@each $type in (success, info, warning, error) {
@include m($type) {
--el-alert-bg-color: #{map.get($colors, $type, 'light-9')};
@include css-var-from-global(
('alert', 'bg-color'),
('color', $type, 'light-9')
);
&.is-light {
background-color: var(--el-alert-bg-color);
color: var(--el-color-#{$type});
background-color: getCssVar('alert', 'bg-color');
color: getCssVar('color', $type);
.#{$namespace}-alert__description {
color: var(--el-color-#{$type});
color: getCssVar('color', $type);
}
}
&.is-dark {
background-color: var(--el-color-#{$type});
color: var(--el-color-white);
background-color: getCssVar('color', $type);
color: getCssVar('color', 'white');
}
}
}
@ -65,8 +68,9 @@
}
& .#{$namespace}-alert__icon {
font-size: var(--el-alert-icon-size);
width: var(--el-alert-icon-size);
font-size: getCssVar('alert', 'icon-size');
width: getCssVar('alert', 'icon-size');
@include when(big) {
font-size: var(--el-alert-icon-large-size);
width: var(--el-alert-icon-large-size);

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

@ -5,7 +5,7 @@
@include b(calendar) {
@include set-component-css-var('calendar', $calendar);
background-color: #fff;
background-color: getCssVar('fill-color', 'blank');
@include e(header) {
display: flex;
@ -15,7 +15,7 @@
}
@include e(title) {
color: getCssVar('color-black');
color: getCssVar('text-color');
align-self: center;
}

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

@ -283,7 +283,7 @@ $checkbox: map.merge(
'checked-text-color': getCssVar('color-primary'),
'checked-input-border-color': getCssVar('color-primary'),
'checked-bg-color': getCssVar('color-primary'),
'checked-icon-color': getCssVar('fill-color', 'blank'),
'checked-icon-color': getCssVar('color', 'white'),
'input-border-color-hover': getCssVar('color-primary'),
),
$checkbox
@ -436,7 +436,7 @@ $select-group: map.merge(
$select-dropdown: () !default;
$select-dropdown: map.merge(
(
'bg-color': getCssVar('color-white'),
'bg-color': getCssVar('bg-color', 'overlay'),
'shadow': getCssVar('box-shadow-light'),
'empty-color': getCssVar('text-color-secondary'),
'max-height': 274px,
@ -611,7 +611,7 @@ $cascader: map.merge(
(
'menu-text-color': getCssVar('text-color-regular'),
'menu-selected-text-color': getCssVar('color-primary'),
'menu-fill': getCssVar('fill-color', 'blank'),
'menu-fill': getCssVar('bg-color', 'overlay'),
'menu-font-size': getCssVar('font-size-base'),
'menu-radius': getCssVar('border-radius-base'),
'menu-border': solid 1px getCssVar('border-color-light'),
@ -735,7 +735,7 @@ $dialog: map.merge(
(
'width': 50%,
'margin-top': 15vh,
'bg-color': getCssVar('color-white'),
'bg-color': getCssVar('bg-color'),
'box-shadow': getCssVar('box-shadow'),
'title-font-size': getCssVar('font-size-large'),
'content-font-size': 14px,
@ -940,10 +940,7 @@ $drawer: () !default;
$drawer: map.merge(
(
'bg-color':
var(
#{getCssVarName('dialog', 'bg-color')},
#{getCssVar('color', 'white')}
),
var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
),
$drawer
@ -1153,7 +1150,7 @@ $timeline: map.merge(
$backtop: () !default;
$backtop: map.merge(
(
'bg-color': getCssVar('fill-color', 'blank'),
'bg-color': getCssVar('bg-color', 'overlay'),
'text-color': getCssVar('color-primary'),
'hover-bg-color': getCssVar('border-color-extra-light'),
),

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

@ -13,6 +13,9 @@ html.dark {
@include set-css-color-type($colors, $type);
}
// --el-box-shadow-#{$type}
@include set-component-css-var('box-shadow', $box-shadow);
// color-scheme
// Background --el-bg-color-#{$type}
@include set-component-css-var('bg-color', $bg-color);
@ -22,6 +25,7 @@ html.dark {
@include set-component-css-var('border-color', $border-color);
// Fill --el-fill-color-#{$type}
@include set-component-css-var('fill-color', $fill-color);
@include set-component-css-var('mask-color', $mask-color);
}
@include dark(card) {

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

@ -50,16 +50,6 @@ $colors: () !default;
// ) !global;
}
// dark-mode
@each $type in common.$types {
@for $i from 1 through 9 {
@include set-color-mix-level($type, $i, 'light', common.$color-black);
}
}
@each $type in common.$types {
@include set-color-mix-level($type, 2, 'dark', common.$color-white);
}
// Background
$bg-color: () !default;
$bg-color: map.merge(
@ -71,6 +61,16 @@ $bg-color: map.merge(
$bg-color
);
// dark-mode
@each $type in common.$types {
@for $i from 1 through 9 {
@include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
}
}
@each $type in common.$types {
@include set-color-mix-level($type, 2, 'dark', common.$color-white);
}
// border
$border-color-base: #f5f8ff;
$border-color: () !default;
@ -86,6 +86,29 @@ $border-color: map.merge(
$border-color
);
// Box-shadow
$box-shadow: () !default;
$box-shadow: map.merge(
(
'': (
0px 12px 32px 4px rgba(0, 0, 0, 0.36),
0px 8px 20px rgba(0, 0, 0, 0.72),
),
'light': (
0px 0px 12px rgba(0, 0, 0, 0.72),
),
'lighter': (
0px 0px 6px rgba(0, 0, 0, 0.72),
),
'dark': (
0px 16px 48px 16px rgba(0, 0, 0, 0.72),
0px 12px 32px #000000,
0px 8px 16px -8px #000000,
),
),
$box-shadow
);
// fill
$fill-color-base: #fafcff;
$fill-color: () !default;
@ -116,6 +139,16 @@ $text-color: map.merge(
$text-color
);
// mask
$mask-color: () !default;
$mask-color: map.merge(
(
'': rgba(0, 0, 0, 0.8),
'extra-light': rgba(0, 0, 0, 0.3),
),
$mask-color
);
// card
$card: () !default;
$card: map.merge(

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

@ -3,7 +3,7 @@
@include b(picker-panel) {
color: var(--el-text-color-regular);
background: getCssVar('color-white');
background: getCssVar('bg-color', 'overlay');
border-radius: var(--el-border-radius-base);
line-height: 30px;
@ -31,7 +31,7 @@
border-top: 1px solid var(--el-datepicker-inner-border-color);
padding: 4px 12px;
text-align: right;
background-color: getCssVar('color-white');
background-color: getCssVar('bg-color', 'overlay');
position: relative;
font-size: 0;
}
@ -116,7 +116,7 @@
border-right: 1px solid var(--el-datepicker-inner-border-color);
box-sizing: border-box;
padding-top: 6px;
background-color: getCssVar('color-white');
background-color: getCssVar('bg-color', 'overlay');
overflow: auto;
}

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

@ -9,9 +9,9 @@
@include e(popper) {
@include set-css-var-type('datepicker', 'border-color', $datepicker);
@include picker-popper(
var(--el-color-white),
1px solid var(--el-datepicker-border-color),
var(--el-box-shadow-light)
getCssVar('bg-color', 'overlay'),
1px solid getCssVar('datepicker', 'border-color'),
getCssVar('box-shadow', 'light')
);
}
}
@ -91,6 +91,7 @@
text-align: center;
font-size: var(--el-font-size-base);
color: var(--el-text-color-regular);
background-color: transparent;
&::placeholder {
color: var(--el-text-color-placeholder);

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

@ -75,7 +75,7 @@ $descriptions-cell-font-size: map.merge(
}
@include e(body) {
background-color: $color-white;
background-color: getCssVar('fill-color', 'blank');
.#{$namespace}-descriptions__table {
border-collapse: collapse;

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

@ -11,9 +11,9 @@
position: relative;
margin: var(--el-dialog-margin-top, 15vh) auto 50px;
background: var(--el-dialog-bg-color);
border-radius: var(--el-dialog-border-radius);
box-shadow: var(--el-dialog-box-shadow);
background: getCssVar('dialog', 'bg-color');
border-radius: getCssVar('dialog', 'border-radius');
box-shadow: getCssVar('dialog', 'box-shadow');
box-sizing: border-box;
width: var(--el-dialog-width, 50%);
@ -43,7 +43,7 @@
}
@include e(header) {
padding: var(--el-dialog-padding-primary);
padding: getCssVar('dialog', 'padding-primary');
padding-bottom: 10px;
margin-right: 16px;
word-break: break-all;
@ -63,14 +63,14 @@
font-size: var(--el-message-close-size, map.get($message, 'close-size'));
.#{$namespace}-dialog__close {
color: var(--el-color-info);
color: getCssVar('color', 'info');
font-size: inherit;
}
&:focus,
&:hover {
.#{$namespace}-dialog__close {
color: var(--el-color-primary);
color: getCssVar('color', 'primary');
}
}
}

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

@ -24,7 +24,7 @@
@include e(text) {
position: absolute;
background-color: $color-white;
background-color: getCssVar('bg-color');
padding: 0 20px;
font-weight: 500;
color: var(--el-text-color-primary);

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

@ -11,7 +11,7 @@ $directions: rtl, ltr, ttb, btt;
@include b(drawer) {
position: absolute;
box-sizing: border-box;
background-color: var(--el-drawer-bg-color);
background-color: getCssVar('drawer', 'bg-color');
display: flex;
flex-direction: column;
box-shadow: getCssVar('box-shadow', 'dark');

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

@ -60,7 +60,7 @@ $dropdown-divider-width: 1px !default;
// using attributes selector to override
@include picker-popper(
$color-white,
getCssVar('bg-color', 'overlay'),
1px solid var(--el-border-color-light),
var(--el-dropdown-menu-box-shadow)
);
@ -160,7 +160,7 @@ $dropdown-menu-padding-vertical: map.merge(
z-index: var(--el-dropdown-menu-index);
padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
margin: 0;
background-color: $color-white;
background-color: getCssVar('bg-color', 'overlay');
border: none;
border-radius: var(--el-border-radius-base);
box-shadow: none;

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

@ -107,7 +107,7 @@
color: var(--el-menu-text-color);
&:hover {
background-color: #fff;
background-color: getCssVar('bg-color', 'overlay');
}
}

2
packages/theme-chalk/src/message-box.scss
View File

@ -14,7 +14,7 @@
width: var(--el-messagebox-width);
padding-bottom: 10px;
vertical-align: middle;
background-color: var(--el-color-white);
background-color: getCssVar('bg-color');
border-radius: var(--el-messagebox-border-radius);
border: 1px solid var(--el-border-color-lighter);
font-size: var(--el-messagebox-font-size);

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

@ -14,7 +14,7 @@
box-sizing: border-box;
border: 1px solid var(--el-notification-border-color);
position: fixed;
background-color: var(--el-color-white);
background-color: getCssVar('bg-color', 'overlay');
box-shadow: var(--el-notification-shadow);
transition: opacity var(--el-transition-duration),
transform var(--el-transition-duration), left var(--el-transition-duration),

22
packages/theme-chalk/src/popper.scss
View File

@ -8,7 +8,7 @@
@include b(popper) {
position: absolute;
border-radius: var(--el-popper-border-radius);
border-radius: getCssVar('popper', 'border-radius');
padding: 5px 11px;
z-index: 2000;
font-size: 12px;
@ -20,24 +20,24 @@
$arrow-selector: #{& + '__arrow'};
@include when(dark) {
color: var(--el-color-white);
background: var(--el-text-color-primary);
border: 1px solid var(--el-text-color-primary);
color: getCssVar('bg-color');
background: getCssVar('text-color', 'primary');
border: 1px solid getCssVar('text-color', 'primary');
#{$arrow-selector}::before {
border: 1px solid var(--el-text-color-primary);
background: var(--el-text-color-primary);
border: 1px solid getCssVar('text-color', 'primary');
background: getCssVar('text-color', 'primary');
right: 0;
}
}
@include when(light) {
background: var(--el-color-white);
border: 1px solid var(--el-border-color-light);
background: getCssVar('bg-color', 'overlay');
border: 1px solid getCssVar('border-color', 'light');
#{$arrow-selector}::before {
border: 1px solid var(--el-border-color-light);
background: var(--el-color-white);
border: 1px solid getCssVar('border-color', 'light');
background: getCssVar('bg-color', 'overlay');
right: 0;
}
}
@ -59,7 +59,7 @@
z-index: -1;
content: ' ';
transform: rotate(45deg);
background: var(--el-text-color-primary);
background: getCssVar('text-color', 'primary');
box-sizing: border-box;
}
}

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

@ -257,7 +257,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
}
@include e(wrapper) {
background-color: #fff;
background-color: getCssVar('fill-color', 'blank');
border: 1px solid getCssVar('border-color');
border-radius: var(--el-border-radius-base);
position: relative;

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

@ -62,7 +62,7 @@
height: 24px;
font-size: 14px;
box-sizing: border-box;
background: $color-white;
background: getCssVar('bg-color', 'overlay');
transition: 0.15s ease-out;
@include when(text) {

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

@ -345,7 +345,7 @@
&.#{$namespace}-table-fixed-column--right {
position: sticky !important;
z-index: 2;
background: #fff;
background: getCssVar('bg-color');
&.is-last-column,
&.is-first-column {
&::before {

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

@ -223,7 +223,7 @@
}
}
@include m(border-card) {
background: $color-white;
background: getCssVar('bg-color', 'overlay');
border: 1px solid getCssVar('border-color');
> .#{$namespace}-tabs__content {
@ -254,7 +254,7 @@
&.is-active {
color: var(--el-color-primary);
background-color: $color-white;
background-color: getCssVar('bg-color', 'overlay');
border-right-color: getCssVar('border-color');
border-left-color: getCssVar('border-color');
}

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

@ -39,7 +39,7 @@
@include b(transfer-panel) {
overflow: hidden;
background: var(--el-color-white);
background: getCssVar('bg-color', 'overlay');
display: inline-block;
text-align: left;
vertical-align: middle;
@ -168,7 +168,7 @@
.#{$namespace}-transfer-panel__footer {
height: var(--el-transfer-panel-footer-height);
background: var(--el-color-white);
background: getCssVar('bg-color', 'overlay');
margin: 0;
padding: 0;
border: 1px solid var(--el-transfer-border-color);

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

@ -10,7 +10,7 @@
@include b(tree) {
position: relative;
cursor: default;
background: var(--el-color-white);
background: getCssVar('fill-color', 'blank');
color: var(--el-tree-text-color);
@include e(empty-block) {