mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme-chalk): dark palette & common color mixins (#6999)

Browse Source 
* feat(theme-chalk): dark palette & common color mixins

* chore: move layouts var

* feat: add dark transparent colors for designer

* refactor: remove example-showcase dark bg
This commit is contained in:
云游君 2022-04-04 22:46:00 +08:00 committed by GitHub
parent 51bd286b6d
commit 316efcc045
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 198 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/.vitepress/vitepress/components/demo/vp-example.vue
View File

@ -36,10 +36,5 @@ defineProps({
background-size: 20px 20px;
background-position: 0px 0px, 10px 0px, 10px -10px, 0px 10px;
}
@at-root .dark .example-showcase {
background-image: unset;
background-color: var(--bg-color-soft);
}
}
</style>

1
docs/.vitepress/vitepress/components/navbar/vp-search.vue
View File

@ -176,6 +176,7 @@ function initialize(userOptions: any) {
--docsearch-footer-background: var(--bg-color);
--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,
0 -3px 6px 0 rgba(69, 98, 155, 0.12);
--docsearch-searchbox-background: var(--bg-color);
--docsearch-searchbox-focus-background: var(--bg-color-mute);
--docsearch-muted-color: var(--text-color-lighter);
--docsearch-text-color: var(--text-color-light);

1
docs/.vitepress/vitepress/index.ts
View File

@ -8,6 +8,7 @@ import '../../../packages/theme-chalk/src/index.scss'
// for dark mode
import '../../../packages/theme-chalk/src/dark/css-vars.scss'
import './styles/css-vars.scss'
import './styles/app.scss'
import 'uno.css'

70
docs/.vitepress/vitepress/styles/css-vars.scss Normal file
View File

@ -0,0 +1,70 @@
// css variables
:root {
// layouts
--vp-screen-max-width: 1376px;
// colors
--text-color: var(--el-text-color-primary);
--text-color-light: var(--el-text-color-regular);
--text-color-lighter: var(--el-text-color-secondary);
--brand-color: var(--el-color-primary);
--brand-color-light: var(--el-color-primary-light-1);
--bg-brand-color: var(--el-color-primary-light-9);
--bg-color: var(--el-bg-color);
--bg-color-soft: #fafafa;
--bg-color-mute: #f2f2f2;
--border-color: var(--el-border-color);
--border-color-light: var(--el-border-color-lighter);
--font-family: var(--el-font-family);
--font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
'Courier New', monospace;
// info
--success-color: var(--el-color-success);
--warning-color: var(--el-color-warning);
--danger-color: var(--el-color-danger);
// header vars
--header-height: 55px;
--nav-height: 55px; // alias of --header-height
/* Screen Size */
--vp-screen-max-width: 1376px;
// sidebar
--vp-sidebar-width-mobile: 320px;
--vp-sidebar-width-small: 272px;
--sidebar-width-sm: 16rem;
--sidebar-width-xs: 20rem;
--content-min-width: 16rem;
--content-max-width: 48rem;
--nav-z-index: 20;
--sub-nav-z-index: 10;
--sidebar-z-index: 40;
--overlay-z-index: 30;
// --dropdown-z-index: 22;
// code block vars
--code-line-height: 1.4;
--code-font-size: var(--el-font-size-base);
--code-bg-color: var(--el-fill-color-light);
--code-text-color: var(--text-color);
--code-font-family: var(--font-family-mono);
// tip block
--block-tip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
--block-warning-bg-color: rgba(var(--el-color-danger-rgb), 0.1);
// link
--link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
}
.dark {
--bg-color-soft: #242424;
--bg-color-mute: #2c2c2c;
}

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

@ -1,80 +1,3 @@
// css variables
:root {
--text-color: var(--el-text-color-primary);
--text-color-light: var(--el-text-color-regular);
--text-color-lighter: var(--el-text-color-secondary);
--brand-color: var(--el-color-primary);
--brand-color-light: var(--el-color-primary-light-1);
--bg-brand-color: var(--el-color-primary-light-9);
--bg-color: var(--el-bg-color);
--bg-color-soft: #fafafa;
--bg-color-mute: #f2f2f2;
--border-color: var(--el-border-color);
--border-color-light: var(--el-border-color-lighter);
--font-family: var(--el-font-family);
--font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
'Courier New', monospace;
// info
--success-color: var(--el-color-success);
--warning-color: var(--el-color-warning);
--danger-color: var(--el-color-danger);
// header vars
--header-height: 55px;
--nav-height: 55px; // alias of --header-height
/* Screen Size */
--vp-screen-max-width: 1376px;
// sidebar
--vp-sidebar-width-mobile: 320px;
--vp-sidebar-width-small: 272px;
--sidebar-width-sm: 16rem;
--sidebar-width-xs: 20rem;
--content-min-width: 16rem;
--content-max-width: 48rem;
--nav-z-index: 20;
--sub-nav-z-index: 10;
--sidebar-z-index: 40;
--overlay-z-index: 30;
// --dropdown-z-index: 22;
// code block vars
--code-line-height: 1.4;
--code-font-size: var(--el-font-size-base);
--code-bg-color: var(--el-fill-color-lighter);
--code-text-color: var(--text-color);
--code-font-family: var(--font-family-mono);
// doc search vars
--docsearch-primary-color: var(--brand-color);
--docsearch-searchbox-background: var(--el-bg-color);
// tip block
--block-tip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
--block-warning-bg-color: rgba(var(--el-color-danger-rgb), 0.1);
// link
--link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
}
// layouts
:root {
--vp-screen-max-width: 1376px;
}
.dark {
--bg-color-soft: var(--el-bg-color);
--bg-color-mute: #2c2c2c;
}
// SCSS variables
// breakpoints
$breakpoint-xxl: 1440px !default;

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

@ -49,31 +49,19 @@ $color-error: map.get($colors, 'error', 'base') !default;
$color-info: map.get($colors, 'info', 'base') !default;
// https://sass-lang.com/documentation/values/maps#immutability
// mix color with white
@mixin set-color-type-light($type, $number) {
// mix colors with white/black to generate light/dark level
@mixin set-color-mix-level(
$type,
$number,
$mode: 'light',
$mix-color: $color-white
) {
$colors: map.deep-merge(
(
$type: (
'light-#{$number}':
'#{$mode}-#{$number}':
mix(
$color-white,
map.get($colors, $type, 'base'),
math.percentage(math.div($number, 10))
),
),
),
$colors
) !global;
}
// mix color with black
@mixin set-color-type-dark($type, $number) {
$colors: map.deep-merge(
(
$type: (
'dark-#{$number}':
mix(
$color-black,
$mix-color,
map.get($colors, $type, 'base'),
math.percentage(math.div($number, 10))
),
@ -94,14 +82,15 @@ $color-info: map.get($colors, 'info', 'base') !default;
// 70% c6e2ff
// 80% d9ecff
// 90% ecf5ff
@for $i from 1 through 9 {
@each $type in $types {
@include set-color-type-light($type, $i);
@each $type in $types {
@for $i from 1 through 9 {
@include set-color-mix-level($type, $i, 'light', $color-white);
}
}
// --el-color-primary-dark-2
@each $type in $types {
@include set-color-type-dark($type, 2);
@include set-color-mix-level($type, 2, 'dark', $color-black);
}
$text-color: () !default;

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

@ -8,7 +8,10 @@
html.dark {
color-scheme: dark;
// todo dark.scss
// hex colors
@each $type in (primary, success, warning, danger, error, info) {
@include set-css-color-type($colors, $type);
}
// color-scheme
// Background --el-bg-color-#{$type}

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

@ -1,7 +1,64 @@
@use 'sass:map';
@use '../mixins/mixins.scss' as *;
@use 'sass:math';
@use '../common/var.scss' as common;
$colors: () !default;
@each $type in common.$types {
$colors: map.deep-merge(
(
$type: (
'base': map.get(common.$colors, $type, 'base'),
),
),
$colors
) !global;
}
// https://sass-lang.com/documentation/values/maps#immutability
// mix colors with white/black to generate light/dark level
@mixin set-color-mix-level(
$type,
$number,
$mode: 'light',
$mix-color: $color-white
) {
// hex mix color
$colors: map.deep-merge(
(
$type: (
'#{$mode}-#{$number}':
mix(
$mix-color,
map.get($colors, $type, 'base'),
math.percentage(math.div($number, 10))
),
),
),
$colors
) !global;
// for designer to view transparent
// $colors: map.deep-merge(
// (
// $type: (
// '#{$mode}-#{$number}':
// rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
// ),
// ),
// $colors
// ) !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;

38
packages/theme-chalk/src/mixins/_var.scss
View File

@ -12,30 +12,28 @@
#{joinVarName($name)}: #{$value};
}
@mixin set-css-color-type-light($type, $i) {
#{getCssVarName('color', $type, 'light', $i)}: #{map.get(
$colors,
$type,
'light-#{$i}'
)};
}
@mixin set-css-color-type($type) {
#{getCssVarName('color', $type)}: #{map.get($colors, $type, 'base')};
@each $i in (3, 5, 7, 8, 9) {
@include set-css-color-type-light($type, $i);
}
#{getCssVarName('color', $type, 'dark-2')}: #{map.get(
$colors,
$type,
'dark-2'
)};
}
// @include set-css-var-type('color', 'primary', $map);
// --el-color-primary: #{map.get($map, 'primary')};
@mixin set-css-var-type($name, $type, $variables) {
#{getCssVarName($name, $type)}: #{map.get($variables, $type)};
}
@mixin set-css-color-type($colors, $type) {
@include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
@each $i in (3, 5, 7, 8, 9) {
@include set-css-var-value(
('color', $type, 'light', $i),
map.get($colors, $type, 'light-#{$i}')
);
}
@include set-css-var-value(
('color', $type, 'dark-2'),
map.get($colors, $type, 'dark-2')
);
}
// set all css var for component by map
@mixin set-component-css-var($name, $variables) {
@each $attribute, $value in $variables {

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

@ -8,30 +8,49 @@
// do not need that, since this could introduce recalculation overhead for rendering.
// https://lisilinhart.info/posts/css-variables-performance/
// common
:root {
color-scheme: light;
@include set-css-var-value('color-white', $color-white);
@include set-css-var-value('color-black', $color-black);
@include set-css-var-value('color-primary', $color-primary);
// get rgb
@each $type in (primary, success, warning, danger, error, info) {
@include set-css-color-rgb($type);
}
@for $i from 1 through 9 {
@include set-css-color-type-light('primary', $i);
}
@include set-css-var-value(
('color-primary', 'dark-2'),
map.get($colors, 'primary', 'dark-2')
);
// Typography
@include set-component-css-var('font-size', $font-size);
@include set-component-css-var('font-family', $font-family);
@include set-css-var-value('font-weight-primary', 500);
@include set-css-var-value('font-line-height-primary', 24px);
// z-index --el-index-#{$type}
@include set-component-css-var('index', $z-index);
// --el-border-radius-#{$type}
@include set-component-css-var('border-radius', $border-radius);
// Transition
// refer to this website to get the bezier motion function detail
// https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
@include set-component-css-var('transition-duration', $transition-duration);
@include set-component-css-var('transition-function', $transition-function);
@include set-component-css-var('transition', $transition);
}
// for light
:root {
color-scheme: light;
@include set-css-var-value('color-white', $color-white);
@include set-css-var-value('color-black', $color-black);
// --el-color-#{$type}
// --el-color-#{$type}-light-{$i}
@each $type in (success, warning, danger, error, info) {
@include set-css-color-type($type);
@each $type in (primary, success, warning, danger, error, info) {
@include set-css-color-type($colors, $type);
}
// color-scheme
@ -44,18 +63,12 @@
// Fill --el-fill-color-#{$type}
@include set-component-css-var('fill-color', $fill-color);
// --el-border-radius-#{$type}
@include set-component-css-var('border-radius', $border-radius);
// Typography
@include set-component-css-var('font-size', $font-size);
@include set-component-css-var('font-family', $font-family);
// 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);
// overlay & mask
@include set-component-css-var('overlay-color', $overlay-color);
@include set-component-css-var('mask-color', $mask-color);
@ -71,18 +84,4 @@
// Svg
@include css-var-from-global('svg-monochrome-grey', 'border-color');
@include set-css-var-value('font-weight-primary', 500);
@include set-css-var-value('font-line-height-primary', 24px);
// z-index
/* Transition
-------------------------- */
// refer to this website to get the bezier motion function detail
// https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
@include set-component-css-var('transition-duration', $transition-duration);
@include set-component-css-var('transition-function', $transition-function);
@include set-component-css-var('transition', $transition);
}