style: button & tag & base background color change

This commit is contained in:
07akioni 2020-02-23 21:17:27 +08:00
parent 13073a3872
commit a00a43bc9c
6 changed files with 39 additions and 39 deletions

View File

@ -13,7 +13,7 @@ transparent
|Name|Type|Default|Description|
|-|-|-|-|
|as|`string`|`'div'`|What tag n-config-provider will be rendered as|
|language|`string`|`en-US`|Language of components inside n-config-provider|
|language|`string`|`'en-US'`|Language of components inside n-config-provider|
|namespace|`string`|`null`|Class name of detached parts of components inside n-config-provider|
|theme|`string`|`null`|Theme name of components inside n-config-provider|
|theme-environment|`object`|`null`|An object with some value which can be accessed by n-config-consumer or n-element inside n-config-provider|

View File

@ -13,7 +13,7 @@ transparent
|名称|类型|默认值|说明|
|-|-|-|-|
|as|`string`|`'div'`|Config Provider 被渲染成什么元素|
|language|`string`|`en-US`|Config Provider 内部的组件语言|
|language|`string`|`'en-US'`|Config Provider 内部的组件语言|
|namespace|`string`|`null`|Config Provider 内部组件被卸载于其他位置的 DOM 的类名|
|theme|`string`|`null`|Config Provider 内部组件的主题|
|theme-environment|`object`|`null`|一个可以被 Config Consumer 或 Element 获取到的主题环境变量|

View File

@ -10,7 +10,7 @@
<n-tag
type="success"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
Yes It Is

View File

@ -42,26 +42,26 @@
) !global;
$--button-ghost-typed-box-shadow: (
'default': inset 0 0 0 1px $--n-border-color,
'default-hover': (inset 0 0 0 1px $--n-primary-hover-color),
'default-active': (inset 0 0 0 1px $--n-primary-active-color),
'default-focus': (inset 0 0 0 1px $--n-primary-hover-color),
'primary': inset 0 0 0 1px $--n-primary-color,
'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
'default-active': inset 0 0 0 1px $--n-primary-active-color,
'default-focus': inset 0 0 0 1px $--n-primary-hover-color,
'primary': inset 0 0 0 1px change-color($--n-primary-color, $alpha: $--n-tertiary-opacity),
'primary-hover': inset 0 0 0 1px $--n-primary-hover-color,
'primary-active': inset 0 0 0 1px $--n-primary-active-color,
'primary-focus': inset 0 0 0 1px $--n-primary-hover-color,
'success': inset 0 0 0 1px $--n-success-color,
'success': inset 0 0 0 1px change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-hover': inset 0 0 0 1px $--n-success-hover-color,
'success-active': inset 0 0 0 1px $--n-success-active-color,
'success-focus': inset 0 0 0 1px $--n-success-hover-color,
'info': inset 0 0 0 1px $--n-info-color,
'info': inset 0 0 0 1px change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-hover': inset 0 0 0 1px $--n-info-hover-color,
'info-active': inset 0 0 0 1px $--n-info-active-color,
'info-focus': inset 0 0 0 1px $--n-info-hover-color,
'warning': inset 0 0 0 1px $--n-warning-color,
'warning': inset 0 0 0 1px change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-hover': inset 0 0 0 1px $--n-warning-hover-color,
'warning-active': inset 0 0 0 1px $--n-warning-active-color,
'warning-focus': inset 0 0 0 1px $--n-warning-hover-color,
'error': inset 0 0 0 1px $--n-error-color,
'error': inset 0 0 0 1px change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-hover': inset 0 0 0 1px $--n-error-hover-color,
'error-active': inset 0 0 0 1px $--n-error-active-color,
'error-focus': inset 0 0 0 1px $--n-error-hover-color

View File

@ -46,43 +46,43 @@
'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)
'success': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-hover': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-active': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-disabled': change-color($--n-success-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity),
'warning': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-hover': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-active': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-disabled': change-color($--n-warning-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity),
'info': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-hover': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-active': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-disabled': change-color($--n-info-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity),
'error': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-hover': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-active': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-disabled': change-color($--n-error-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity)
) !global;
$--tag-close-color: (
'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),
'default-disabled': change-color($--n-close-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-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),
'success-disabled': change-color($--n-success-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-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),
'warning-disabled': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-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),
'info-disabled': change-color($--n-info-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-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)
'error-disabled': change-color($--n-error-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity)
) !global;
}

View File

@ -3,10 +3,10 @@
$--alpha-1: .92 !global;
$--alpha-2: .84 !global;
$--alpha-3: .44 !global;
$--alpha-4: .32 !global;
$--alpha-3: .52 !global;
$--alpha-4: .38 !global;
$--alpha-disabled: .5 !global;
$--alpha-disabled: .6 !global;
$--alpha-pending: .05 !global;
// overlay-text
@ -36,10 +36,10 @@
// neutral
$--neutral-base: black !global;
$--neutral-popover: rgb(89, 93, 119) !global;
$--neutral-modal: rgb(70, 75, 99) !global;
$--neutral-card: rgb(30, 36, 55) !global;
$--neutral-body: rgb(18, 24, 42) !global;
$--neutral-popover: rgb(96, 96, 104) !global;
$--neutral-modal: rgb(76, 76, 84) !global;
$--neutral-card: rgb(32, 32, 36) !global;
$--neutral-body: rgb(24, 24, 28) !global;
$--neutral-disabled: null !global;
$--neutral-border: null !global;
$--neutral-divider: null !global;