mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-13 13:59:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(tag): dark colors

Browse Source
This commit is contained in:
07akioni 2020-02-23 14:13:30 +08:00
parent f39af4f778
commit 13073a3872
6 changed files with 82 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/Tag.scss
View File

@ -28,12 +28,14 @@
@mixin tag-type-mixin($type) {
@include m($type + '-type') {
@include not-m(checkable) {
box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type);
color: map-get($--tag-text-color, $type);
background-color: map-get($--tag-background-color, $type);
@include e(close) {
fill: map-get($--tag-close-color, $type);
}
@include not-m(disabled) {
box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type);
color: map-get($--tag-text-color, $type);
background-color: map-get($--tag-background-color, $type);
@include e(close) {
fill: map-get($--tag-close-color, $type);
&:hover {
fill: map-get($--tag-close-color, $type + '-hover');
}

109
styles/themes/dark/components/Tag.scss
View File

@ -3,8 +3,8 @@
'checkable-default': $--n-secondary-text-color,
'checkable-hover': $--n-primary-color,
'checkable-active': $--n-base-background-color,
'default': $--n-primary-color,
'default-disabled': change-color($--n-primary-color, $alpha: .3),
'default': $--n-secondary-text-color,
'default-disabled': $--n-disabled-text-color,
'success': $--n-success-color,
'success-disabled': change-color($--n-success-color, $alpha: .3),
'warning': $--n-warning-color,
@ -21,63 +21,68 @@
'checkable-checked-hover': $--n-primary-hover-color,
'checkable-checked-active': $--n-primary-active-color,
'default': transparent,
'default-hover': change-color($--n-primary-color, $alpha: .2),
'default-active': change-color($--n-primary-color, $alpha: .2),
'default-disabled': transparent,
'default-hover': $--n-pending-overlay-color,
'default-active': $--n-pending-overlay-color,
'default-disabled': $--n-disabled-background-color,
'success': transparent,
'success-hover': change-color($--n-success-color, $alpha: .2),
'success-active': change-color($--n-success-color, $alpha: .2),
'success-disabled': transparent,
'success-hover': change-color($--n-success-color, $alpha: $--n-pending-opacity),
'success-active': change-color($--n-success-color, $alpha: $--n-pending-opacity),
'success-disabled': change-color($--n-success-color, $alpha: $--n-disabled-fill-opacity),
'warning': transparent,
'warning-hover': change-color($--n-warning-color, $alpha: .2),
'warning-active': change-color($--n-warning-color, $alpha: .2),
'warning-disabled': transparent,
'warning-hover': change-color($--n-warning-color, $alpha: $--n-pending-opacity),
'warning-active': change-color($--n-warning-color, $alpha: $--n-pending-opacity),
'warning-disabled': change-color($--n-warning-color, $alpha: $--n-disabled-fill-opacity),
'info': transparent,
'info-hover': change-color($--n-info-color, $alpha: .2),
'info-active': change-color($--n-info-color, $alpha: .2),
'info-disabled': transparent,
'info-hover': change-color($--n-info-color, $alpha: $--n-pending-opacity),
'info-active': change-color($--n-info-color, $alpha: $--n-pending-opacity),
'info-disabled': change-color($--n-info-color, $alpha: $--n-disabled-fill-opacity),
'error': transparent,
'error-hover': change-color($--n-error-color, $alpha: .2),
'error-active': change-color($--n-error-color, $alpha: .2),
'error-disabled': transparent,
'error-hover': change-color($--n-error-color, $alpha: $--n-pending-opacity),
'error-active': change-color($--n-error-color, $alpha: $--n-pending-opacity),
'error-disabled': change-color($--n-error-color, $alpha: $--n-disabled-fill-opacity)
) !global;
$--tag-border-color: (
'default': $--n-primary-color,
'default-hover': $--n-primary-color,
'default-active': $--n-primary-color,
'success': $--n-success-color,
'success-hover': $--n-success-color,
'success-active': $--n-success-color,
'warning': $--n-warning-color,
'warning-hover': $--n-warning-color,
'warning-active': $--n-warning-color,
'info': $--n-info-color,
'info-hover': $--n-info-color,
'info-active': $--n-info-color,
'error': $--n-error-color,
'error-hover': $--n-error-color,
'error-active': $--n-error-color,
'default': $--n-border-color,
'default-hover': $--n-border-color,
'default-active': $--n-border-color,
'default-disabled': $--n-border-color,
'success': change-color($--n-success-color, $alpha: $--n-disabled-opacity),
'success-hover': change-color($--n-success-color, $alpha: $--n-disabled-opacity),
'success-active': change-color($--n-success-color, $alpha: $--n-disabled-opacity),
'success-disabled': change-color($--n-success-color, $alpha: $--n-disabled-opacity * $--n-disabled-opacity),
'warning': change-color($--n-warning-color, $alpha: $--n-disabled-opacity),
'warning-hover': change-color($--n-warning-color, $alpha: $--n-disabled-opacity),
'warning-active': change-color($--n-warning-color, $alpha: $--n-disabled-opacity),
'warning-disabled': change-color($--n-warning-color, $alpha: $--n-disabled-opacity * $--n-disabled-opacity),
'info': change-color($--n-info-color, $alpha: $--n-disabled-opacity),
'info-hover': change-color($--n-info-color, $alpha: $--n-disabled-opacity),
'info-active': change-color($--n-info-color, $alpha: $--n-disabled-opacity),
'info-disabled': change-color($--n-info-color, $alpha: $--n-disabled-opacity * $--n-disabled-opacity),
'error': change-color($--n-error-color, $alpha: $--n-disabled-opacity),
'error-hover': change-color($--n-error-color, $alpha: $--n-disabled-opacity),
'error-active': change-color($--n-error-color, $alpha: $--n-disabled-opacity),
'error-disabled': change-color($--n-error-color, $alpha: $--n-disabled-opacity * $--n-disabled-opacity)
) !global;
$--tag-close-color: (
'default': change-color($--n-primary-color, $alpha: .5),
'default-hover': change-color($--n-primary-color, $alpha: 1),
'default-active': change-color($--n-primary-color, $alpha: .75),
'default-disabled': change-color($--n-primary-color, $alpha: .25),
'success': change-color($--n-success-color, $alpha: .5),
'success-hover': change-color($--n-success-color, $alpha: 1),
'success-active': change-color($--n-success-color, $alpha: .75),
'success-disabled': change-color($--n-success-color, $alpha: .25),
'warning': change-color($--n-warning-color, $alpha: .5),
'warning-hover': change-color($--n-warning-color, $alpha: 1),
'warning-active': change-color($--n-warning-color, $alpha: .75),
'warning-disabled': change-color($--n-warning-color, $alpha: .25),
'info': change-color($--n-info-color, $alpha: .5),
'info-hover': change-color($--n-info-color, $alpha: 1),
'info-active': change-color($--n-info-color, $alpha: .75),
'info-disabled': change-color($--n-info-color, $alpha: .25),
'error': change-color($--n-error-color, $alpha: .5),
'error-hover': change-color($--n-error-color, $alpha: 1),
'error-active': change-color($--n-error-color, $alpha: .75),
'error-disabled': change-color($--n-error-color, $alpha: .25),
'default': $--n-close-color,
'default-hover': $--n-close-color,
'default-active': $--n-close-color,
'default-disabled': change-color($--n-close-color, $alpha: $--n-tertiary-opacity * $--n-disabled-opacity),
'success': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-hover': change-color($--n-success-color, $alpha: .8),
'success-active': change-color($--n-success-color, $alpha: .6),
'success-disabled': change-color($--n-success-color, $alpha: $--n-tertiary-opacity * $--n-disabled-opacity),
'warning': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-hover': change-color($--n-warning-color, $alpha: .8),
'warning-active': change-color($--n-warning-color, $alpha: .6),
'warning-disabled': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity * $--n-disabled-opacity),
'info': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-hover': change-color($--n-info-color, $alpha: .8),
'info-active': change-color($--n-info-color, $alpha: .6),
'info-disabled': change-color($--n-info-color, $alpha: $--n-tertiary-opacity * $--n-disabled-opacity),
'error': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-hover': change-color($--n-error-color, $alpha: .8),
'error-active': change-color($--n-error-color, $alpha: .6),
'error-disabled': change-color($--n-error-color, $alpha: $--n-tertiary-opacity * $--n-disabled-opacity)
) !global;
}

14
styles/themes/dark/darkColors.scss
View File

@ -3,10 +3,11 @@
$--alpha-1: .92 !global;
$--alpha-2: .84 !global;
$--alpha-3: .42 !global;
$--alpha-4: .28 !global;
$--alpha-3: .44 !global;
$--alpha-4: .32 !global;
$--alpha-disabled: .5 !global;
$--alpha-pending: .05 !global;
// overlay-text
$--overlay-text-1: rgba(255, 255, 255, $--alpha-1) !global;
@ -17,15 +18,18 @@
// overlay
$--overlay-avatar: rgba(255, 255, 255, .16) !global;
$--overlay-rail: rgba(255, 255, 255, .18) !global;
$--overlay-border: rgba(255, 255, 255, .16) !global;
$--overlay-border: rgba(255, 255, 255, .24) !global;
$--overlay-divider: rgba(255, 255, 255, .10) !global;
$--overlay-input: rgba(255, 255, 255, .1) !global;
$--overlay-action: rgba(255, 255, 255, .05) !global;
$--overlay-tab: rgba(255, 255, 255, .08) !global;
$--overlay-scrollbar: rgba(255, 255, 255, .2) !global;
$--overlay-scrollbar-hover: rgba(255, 255, 255, .3) !global;
$--overlay-disabled: rgba(255, 255, 255, alpha($--overlay-input) * $--alpha-disabled) !global;
$--overlay-pending: rgba(255, 255, 255, .05) !global;
$--alpha-disabled-fill: alpha($--overlay-input) * $--alpha-disabled !global;
$--overlay-disabled: rgba(255, 255, 255, $--alpha-disabled-fill) !global;
$--overlay-pending: rgba(255, 255, 255, $--alpha-pending) !global;
$--overlay-active: rgba(255, 255, 255, .03) !global;
$--overlay-code: rgba(255, 255, 255, .12) !global;
$--overlay-tag: null !global;

2
styles/themes/dark/index.scss
View File

@ -101,6 +101,8 @@
$--n-primary-opacity: $--alpha-1 !global;
$--n-secondary-opacity: $--alpha-2 !global;
$--n-tertiary-opacity: $--alpha-3 !global;
$--n-pending-opacity: $--alpha-pending !global;
$--n-disabled-fill-opacity: $--alpha-disabled-fill !global;
$--n-icon-color: $--overlay-text-4 !global;

2
styles/themes/light/index.scss
View File

@ -101,6 +101,8 @@
$--n-primary-opacity: $--alpha-1 !global;
$--n-secondary-opacity: $--alpha-2 !global;
$--n-tertiary-opacity: $--alpha-3 !global;
$--n-pending-opacity: $--alpha-pending !global;
$--n-disabled-fill-opacity: $--alpha-disabled-fill !global;
$--n-icon-color: $--overlay-text-4 !global;

8
styles/themes/light/lightColors.scss
View File

@ -7,6 +7,7 @@
$--alpha-4: .24 !global;
$--alpha-disabled: .5 !global;
$--alpha-pending: .04 !global;
// overlay-text
$--overlay-text-1: rgba(0, 0, 0, $--alpha-1) !global;
@ -24,8 +25,11 @@
$--overlay-tab: rgba(0, 0, 0, .04) !global;
$--overlay-scrollbar: rgba(0, 0, 0, .25) !global;
$--overlay-scrollbar-hover: rgba(0, 0, 0, .4) !global;
$--overlay-disabled: rgba(0, 0, 0, .04) !global;
$--overlay-pending: rgba(0, 0, 0, .04) !global;
$--alpha-disabled-fill: .04 !global;
$--overlay-disabled: rgba(0, 0, 0, $--alpha-disabled-fill) !global;
$--overlay-pending: rgba(0, 0, 0, $--alpha-pending) !global;
$--overlay-active: rgba(0, 0, 0, .06) !global;
$--overlay-code: rgba(0, 0, 0, .025) !global;
$--overlay-tag: rgba(0, 0, 0, .025) !global;