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

refactor: generate color var by sass map (#2504)

Browse Source
This commit is contained in:
云游君 2021-07-13 10:26:04 +08:00 committed by GitHub
parent c1770d8877
commit 0074f334fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 148 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,8 +32,8 @@
&:hover,
&:focus {
color: $--color-primary;
border-color: $--color-primary-light-7;
background-color: $--color-primary-light-9;
border-color: map.get($--colors, 'primary', 'light-7');
background-color: map.get($--colors, 'primary', 'light-9');
}
&:active {

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

@ -1,3 +1,5 @@
@use "sass:map";
@import "mixins/mixins";
@import "common/var";
@ -18,9 +20,9 @@
@include when(checked) {
background-color: #DEEDFC;
color: $--color-primary-light-1;
color: map.get($--colors, 'primary', 'light-1');
&:hover {
background-color: $--color-primary-light-7;
background-color: map.get($--colors, 'primary', 'light-7');
}
}
}

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

@ -19,39 +19,77 @@ $--color-transition-base: color .2s cubic-bezier(.645, .045, .355, 1) !default;
/* Color
-------------------------- */
/// color|1|Brand Color|0
$--color-primary: #409EFF !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
/// color|1|Functional Color|1
$--color-success: #67C23A !default;
/// color|1|Functional Color|1
$--color-warning: #E6A23C !default;
/// color|1|Functional Color|1
$--color-danger: #F56C6C !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;
$--colors: () !default;
$--colors: map.deep-merge(
(
'white': #FFFFFF,
'black': #000000,
'primary': (
'base': #409EFF
),
'success': (
'base': #67C23A
),
'warning': (
'base': #E6A23C
),
'danger': (
'base': #F56C6C
),
'info': (
'base': #909399
)
),
$--colors
);
$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
$--color-white: map.get($--colors, 'white');
$--color-black: map.get($--colors, 'black');
$--color-primary: map.get($--colors, 'primary', 'base');
$--color-success: map.get($--colors, 'success', 'base');
$--color-warning: map.get($--colors, 'warning', 'base');
$--color-danger: map.get($--colors, 'danger', 'base');
$--color-info: map.get($--colors, 'info', 'base');
// https://sass-lang.com/documentation/values/maps#immutability
@mixin set-color-primary-light($color, $number) {
$--colors: map.deep-merge($--colors, (
'primary': (
'light-#{$number}': mix($--color-white, $color, math.percentage(math.div($number, 10)))
)
)) !global;
}
// $--color-primary-light-i
// 10% 53a8ff
// 20% 66b1ff
// 30% 79bbff
// 40% 8cc5ff
// 50% a0cfff
// 60% b3d8ff
// 70% c6e2ff
// 80% d9ecff
// 90% ecf5ff
@for $i from 1 through 9 {
@include set-color-primary-light(map.get($--colors, 'primary', 'base'), $i);
}
// generate
// $--colors.success.light: mix($--color-white, $--color-success, 80%) !default;
// $--colors.success.lighter: mix($--color-white, $--color-success, 90%) !default;
@mixin set-color-type-light($type) {
$--colors: map.deep-merge($--colors, (
$type: (
'light': mix($--color-white, map.get($--colors, $type, 'base'), 80%),
'lighter': mix($--color-white, map.get($--colors, $type, 'base'), 90%),
)
)) !global;
}
@each $type in (success, warning, danger, info) {
@include set-color-type-light($type);
}
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
/// color|1|Font Color|2
$--color-text-primary: #303133 !default;
/// color|1|Font Color|2
@ -75,7 +113,7 @@ $--background-color-base: #F5F7FA !default;
/* Link
-------------------------- */
$--link-color: $--color-primary-light-2 !default;
$--link-color: map.get($--colors, 'primary', 'light-2') !default;
$--link-hover-color: $--color-primary !default;
/* Border
@ -256,10 +294,10 @@ $--alert-close-font-size: 12px !default;
/// fontSize||Font|1
$--alert-close-customed-font-size: 13px !default;
$--alert-success-color: $--color-success-lighter !default;
$--alert-info-color: $--color-info-lighter !default;
$--alert-warning-color: $--color-warning-lighter !default;
$--alert-danger-color: $--color-danger-lighter !default;
$--alert-success-color: map.get($--colors, 'success', 'lighter') !default;
$--alert-info-color: map.get($--colors, 'info', 'lighter') !default;
$--alert-warning-color: map.get($--colors, 'warning', 'lighter') !default;
$--alert-danger-color: map.get($--colors, 'danger', 'lighter') !default;
/// height||Other|4
$--alert-icon-size: 16px !default;
@ -393,6 +431,12 @@ $--input-line-height: (
'mini': 20px
);
$--input-number-width: (
'medium': 200px,
'small': 130px,
'mini': 130px
);
/* Cascader
-------------------------- */
/// color||Color|0
@ -531,7 +575,7 @@ $--table-font-color: $--color-text-regular !default;
$--table-header-font-color: $--color-text-secondary !default;
/// color||Color|0
$--table-row-hover-background-color: $--background-color-base !default;
$--table-current-row-background-color: $--color-primary-light-9 !default;
$--table-current-row-background-color: map.get($--colors, 'primary', 'light-9') !default;
/// color||Color|0
$--table-header-background-color: $--color-white !default;
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
@ -625,7 +669,7 @@ $--tree-expand-icon-color: $--color-text-placeholder !default;
/* Dropdown
-------------------------- */
$--dropdown-menu-box-shadow: $--box-shadow-light !default;
$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
$--dropdown-menuItem-hover-fill: map.get($--colors, 'primary', 'light-9') !default;
$--dropdown-menuItem-hover-color: $--link-color !default;
$--dropdown-menu-index: 10 !default;
@ -674,7 +718,7 @@ $--menu-item-font-size: $--font-size-base !default;
$--menu-item-font-color: $--color-text-primary !default;
/// color||Color|0
$--menu-background-color: $--color-white !default;
$--menu-item-hover-fill: $--color-primary-light-9 !default;
$--menu-item-hover-fill: map.get($--colors, 'primary', 'light-9') !default;
$--menu-border-color: #e6e6e6 !default;
/* Rate

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

@ -124,24 +124,26 @@
}
@each $size in (medium, small, mini) {
line-height: map.get($--input-height, $size);
@include m($size) {
line-height: map.get($--input-height, $size);
&.#{$namespace}-input__inner {
height: map.get($--input-height, $size);
}
&.#{$namespace}-input__inner {
height: map.get($--input-height, $size);
}
.#{$namespace}-range-separator {
line-height: map.get($--input-line-height, $size);
font-size: map.get($--input-font-size, $size);
}
.#{$namespace}-range-separator {
line-height: map.get($--input-line-height, $size);
font-size: map.get($--input-font-size, $size);
}
.#{$namespace}-range-input {
font-size: map.get($--input-font-size, $size);
}
.#{$namespace}-range-input {
font-size: map.get($--input-font-size, $size);
}
.#{$namespace}-range__icon,
.#{$namespace}-range__close-icon {
line-height: map.get($--input-line-height, $size);
.#{$namespace}-range__icon,
.#{$namespace}-range__close-icon {
line-height: map.get($--input-line-height, $size);
}
}
}

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

@ -73,26 +73,23 @@
}
@each $size in (medium, small, mini) {
line-height: #{map.get($--input-height, $size) - 2};
@include m($size) {
width: map.get($--input-number-width, $size);
line-height: #{map.get($--input-height, $size) - 2};
@include e((increase, decrease)) {
width: map.get($--input-height, $size);
font-size: map.get($--input-font-size, $size);
@include e((increase, decrease)) {
width: map.get($--input-height, $size);
font-size: map.get($--input-font-size, $size);
}
.#{$namespace}-input__inner {
padding-left: #{map.get($--input-height, $size) + 7};
padding-right: #{map.get($--input-height, $size) + 7};
}
}
.#{$namespace}-input__inner {
padding-left: #{map.get($--input-height, $size) + 7};
padding-right: #{map.get($--input-height, $size) + 7};
}
}
@include m(medium) {
width: 200px;
}
@include m(small) {
width: 130px;
@include e((increase, decrease)) {
[class*=#{$namespace}-icon] {
transform: scale(.9);
@ -101,8 +98,6 @@
}
@include m(mini) {
width: 130px;
@include e((increase, decrease)) {
[class*=#{$namespace}-icon] {
transform: scale(.8);

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

@ -1,3 +1,5 @@
@use "sass:map";
@import "mixins/mixins";
@import "common/var";
@ -40,8 +42,8 @@
}
@include m(success) {
background-color: $--color-success-lighter;
border-color: $--color-success-light;
background-color: map.get($--colors, 'success', 'lighter');
border-color: map.get($--colors, 'success', 'light');
.#{$namespace}-message__content {
color: $--message-success-font-color;
@ -49,8 +51,8 @@
}
@include m(warning) {
background-color: $--color-warning-lighter;
border-color: $--color-warning-light;
background-color: map.get($--colors, 'warning', 'lighter');
border-color: map.get($--colors, 'warning', 'light');
.#{$namespace}-message__content {
color: $--message-warning-font-color;
@ -58,8 +60,8 @@
}
@include m(error) {
background-color: $--color-danger-lighter;
border-color: $--color-danger-light;
background-color: map.get($--colors, 'danger', 'lighter');
border-color: map.get($--colors, 'danger', 'light');
.#{$namespace}-message__content {
color: $--message-danger-font-color;

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

@ -1,3 +1,5 @@
@use "sass:map";
@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";
@ -87,7 +89,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
}
.btn-next {
padding-left: 12px;
padding-left: 12px;
}
.#{$namespace}-pager li.disabled {
@ -187,7 +189,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
line-height: 18px;
padding: 0 2px;
height: $--pagination-button-height;
text-align: center;
margin: 0 2px;
box-sizing: border-box;
@ -213,7 +215,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
.btn-next,
.#{$namespace}-pager li {
margin: 0 5px;
background-color: $--color-info-lighter;
background-color: map.get($--colors, 'info', 'lighter');
color: $--color-text-regular;
min-width: 30px;
border-radius: 2px;

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

@ -1,35 +1,30 @@
@use "sass:map";
// CSS3 var
@import 'common/var';
@mixin set-css-color-primary($i) {
--el-color-primary-light-#{$i}: #{map.get($--colors, 'primary', 'light-#{$i}')};
}
@mixin set-css-color-type($type) {
--el-color-#{$type}: #{map.get($--colors, $type, 'base')};
--el-color-#{$type}-light: #{map.get($--colors, $type, 'light')};
--el-color-#{$type}-lighter: #{map.get($--colors, $type, 'lighter')};
}
:root {
--el-color-primary: #{$--color-primary};
--el-color-white: #{$--color-white};
--el-color-black: #{$--color-black};
--el-color-primary-light-1: #{$--color-primary-light-1};
--el-color-primary-light-2: #{$--color-primary-light-2};
--el-color-primary-light-3: #{$--color-primary-light-3};
--el-color-primary-light-4: #{$--color-primary-light-4};
--el-color-primary-light-5: #{$--color-primary-light-5};
--el-color-primary-light-6: #{$--color-primary-light-6};
--el-color-primary-light-7: #{$--color-primary-light-7};
--el-color-primary-light-8: #{$--color-primary-light-8};
--el-color-primary-light-9: #{$--color-primary-light-9};
@for $i from 1 through 9 {
@include set-css-color-primary($i);
}
--el-color-success: #{$--color-success};
--el-color-warning: #{$--color-warning};
--el-color-danger: #{$--color-danger};
--el-color-info: #{$--color-info};
--el-color-success-light: #{$--color-success-light};
--el-color-warning-light: #{$--color-warning-light};
--el-color-danger-light: #{$--color-danger-light};
--el-color-info-light: #{$--color-info-light};
--el-color-success-lighter: #{$--color-success-light};
--el-color-warning-lighter: #{$--color-warning-light};
--el-color-danger-lighter: #{$--color-danger-light};
--el-color-info-lighter: #{$--color-info-light};
@each $type in (success, warning, danger, info) {
@include set-css-color-type($type);
}
--el-color-text-primary: #{$--color-text-primary};
--el-color-text-regular: #{$--color-text-regular};