mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: build new color system, wip

Browse Source
This commit is contained in:
07akioni 2020-02-19 22:37:20 +08:00
parent 245855b212
commit 2f028efc74
23 changed files with 120 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
styles/Button.scss
View File

@ -274,7 +274,7 @@
}
@include m(disabled) {
cursor: not-allowed;
opacity: .4;
opacity: .45;
}
&::-moz-focus-inner {
border: 0;

61
styles/Checkbox.scss
View File

@ -27,12 +27,6 @@
transition: box-shadow 0.3s $--n-ease-in-out-cubic-bezier,
background-color 0.3s $--n-ease-in-out-cubic-bezier;
@include e(line-mark, check-mark) {
path {
transition: fill .3s $--n-ease-in-out-cubic-bezier;
fill: $--checkbox-icon-fill;
}
}
@include e(line-mark) {
position: absolute;
top: 1px;
left: 1px;
@ -42,22 +36,9 @@
opacity: 0;
transform: scale(0.5);
transform-origin: center;
transition: transform 0.3s $--n-ease-in-out-cubic-bezier,
opacity 0.3s $--n-ease-in-out-cubic-bezier,
border-color 0.3s $--n-ease-in-out-cubic-bezier;
}
@include e(check-mark) {
content: "";
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
width: calc(100% - 2px);
opacity: 0;
transform: scale(0.5);
transform-origin: center;
transition: transform 0.3s $--n-ease-in-out-cubic-bezier,
transition:
fill 0.3s $--n-ease-in-out-cubic-bezier,
transform 0.3s $--n-ease-in-out-cubic-bezier,
opacity 0.3s $--n-ease-in-out-cubic-bezier,
border-color 0.3s $--n-ease-in-out-cubic-bezier;
}
@ -95,26 +76,19 @@
@include b(checkbox) {
&:hover {
@include b(checkbox-box) {
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
}
}
&:focus {
@include b(checkbox-box) {
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
}
}
@include b(checkbox-box) {
background-color: map-get($--checkbox-background-color, 'default');
box-shadow: inset 0 0 0 1px $--checkbox-border-color;
@include e(line-mark) {
path {
fill: $--checkbox-indeterminate-color;
}
}
@include e(check-mark) {
path {
fill: $--checkbox-indeterminate-color;
}
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'default');
@include e(line-mark, check-mark) {
fill: map-get($--checkbox-icon-color, 'default');
}
}
@include e(label) {
@ -123,12 +97,12 @@
@include m(checked, indeterminate) {
&:focus {
@include b(checkbox-box) {
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active, 0 0 0 2px change-color($--checkbox-border-color--active, $alpha: .3);
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'), 0 0 0 2px change-color(map-get($--checkbox-border-color, 'active'), $alpha: .3);
}
}
@include b(checkbox-box) {
background-color: $--checkbox-border-color--active;
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
background-color: map-get($--checkbox-border-color, 'active');
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
border-left: 0;
border-top: 0;
}
@ -136,16 +110,9 @@
@include m(disabled) {
@include b(checkbox-box) {
background-color: map-get($--checkbox-background-color, 'disabled');
box-shadow: inset 0 0 0 1px $--checkbox-disabled;
@include e(check-mark) {
path {
fill: $--checkbox-disabled;
}
}
@include e(line-mark) {
path {
fill: $--checkbox-disabled;
}
box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'disabled');
@include e(check-mark, line-mark) {
fill: map-get($--checkbox-icon-color, 'disabled');
}
}
@include e(label) {

8
styles/Input.scss
View File

@ -199,8 +199,8 @@
}
@include e(suffix, prefix) {
@include b(icon) {
fill: $--input-icon-color;
stroke: $--input-icon-color;
fill: map-get($--input-icon-color, 'default');
stroke: map-get($--input-icon-color, 'default');
}
}
@include e(input, textarea) {
@ -253,8 +253,8 @@
}
@include e(suffix, prefix) {
@include b(icon) {
fill: map-get($--input-placeholder-color, 'disabled');
stroke: map-get($--input-placeholder-color, 'disabled');
fill: map-get($--input-icon-color, 'disabled');
stroke: map-get($--input-icon-color, 'disabled');
}
}
@include e(splitor) {

4
styles/Switch.scss
View File

@ -61,11 +61,11 @@
&::before {
box-shadow: $--switch-switcher-box-shadow;
background-position: $--switch-background-position;
background-image: map-get($map: $--switch-switcher-color, $key: 'inactive');
background-image: map-get($map: $--switch-switcher-background-image, $key: 'inactive');
}
&::after {
background-position: $--switch-background-position;
background-image: map-get($map: $--switch-switcher-color, $key: 'active');
background-image: map-get($map: $--switch-switcher-background-image, $key: 'active');
}
background-color: map-get($map: $--switch-rail-background-color, $key: 'inactive');
@include m(active) {

2
styles/themes/dark/components/Anchor.scss
View File

@ -1,5 +1,5 @@
@mixin setup-dark-anchor {
$--anchor-rail-background-color: #404555 !global;
$--anchor-rail-background-color: $--n-rail-color !global;
$--anchor-link-title-text-color: (
'default': $--n-primary-text-color,
'hover': $--n-primary-color,

20
styles/themes/dark/components/CheckBox.scss
View File

@ -1,15 +1,17 @@
@mixin setup-dark-checkbox {
$border-color: rgba(255, 255, 255, 0.4);
$--checkbox-font-color: $--n-secondary-text-color !global;
$--checkbox-border-color: $border-color !global;
$--checkbox-border-color--active: $--n-primary-color !global;
$--checkbox-indeterminate-color: $--neutral-body !global;
$--checkbox-background-color: (
'default': rgba(255, 255, 255, 0),
'disabled': rgba(255, 255, 255, 0.16)
'default': transparent,
'disabled': $--n-disabled-background-color
) !global;
$--checkbox-icon-color: (
'default': $--n-body-background-color,
'disabled': $--n-disabled-text-color
) !global;
$--checkbox-border-color: (
'default': $--n-border-color,
'disabled': $--n-border-color,
'active': $--n-primary-color
) !global;
$--checkbox-disabled: $border-color !global;
$--checkbox-icon-fill: $--n-body-background-color !global;
$--checkbox-label-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color

15
styles/themes/dark/components/Input.scss
View File

@ -1,23 +1,26 @@
@mixin setup-dark-input {
$--input-color: (
'default': $--n-secondary-text-color,
'disabled': rgba(255, 255, 255, .2)
'disabled': $--n-disabled-text-color
) !global;
$--input-caret-color: (
'default': $--n-primary-color,
'error': $--n-error-color
) !global;
$--input-placeholder-color: (
'default': rgba(255, 255, 255, .3),
'disabled': rgba(255, 255, 255, .2)
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * 0.6),
) !global;
$--input-background-color: (
'default': rgba(255, 255, 255, .1),
'disabled': rgba(255, 255, 255, .06),
'default': $--n-input-background-color,
'disabled': change-color($--n-input-background-color, $alpha: alpha($--n-input-background-color) * 0.6),
'focus': change-color($--n-primary-color, $alpha: 0.1),
'error-focus': change-color($--n-error-color, $alpha: 0.1),
) !global;
$--input-icon-color: rgba(255, 255, 255, 0.2) !global;
$--input-icon-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * 0.6),
)!global;
$--input-border-mask-border-color: (
'default': transparent,
'hover': $--n-primary-color,

18
styles/themes/dark/components/InputNumber.scss
View File

@ -7,14 +7,14 @@
)!global;
$--input-number-text-decoration-color: $--n-secondary-text-color !global;
$--input-number-placeholder-color: (
'default': rgba(255, 255, 255, .3),
'disabled': rgba(255, 255, 255, .2)
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * 0.6),
) !global;
$--input-number-background-color: (
"default": rgba(255, 255, 255, .1),
"disabled": rgba(255, 255, 255, .06),
"focus": change-color($--n-primary-color, $alpha: 0.1),
"error-focus": change-color($--n-error-color, $alpha: 0.1)
'default': $--n-input-background-color,
'disabled': change-color($--n-input-background-color, $alpha: alpha($--n-input-background-color) * 0.6),
'focus': change-color($--n-primary-color, $alpha: 0.1),
'error-focus': change-color($--n-error-color, $alpha: 0.1),
) !global;
$--input-number-text-color: (
'default': $--n-secondary-text-color,
@ -26,8 +26,10 @@
'hover': $--n-primary-color
) !global;
$--input-number-button-background-color: (
'default': rgba(255, 255, 255, .06),
'disabled': rgba(255, 255, 255, .04)
'default': $--n-action-background-color,
'hover': $--n-action-background-color,
'active': $--n-action-background-color,
'disabled': $--n-action-background-color,
) !global;
$--input-number-caret-color: $--n-primary-color !global;
$--input-number-disabled-opacity: 1 !global;

2
styles/themes/dark/components/Progress.scss
View File

@ -1,5 +1,5 @@
@mixin setup-dark-progress {
$--progress-rail-color: $--n-divider-color !global;
$--progress-rail-color: change-color($--n-rail-color, $alpha: alpha($--n-rail-color) * 0.6) !global;
$--progress-fill-color: (
'default': $--n-info-color,
'info': $--n-info-color,

4
styles/themes/dark/components/Scrollbar.scss
View File

@ -1,6 +1,6 @@
@mixin setup-dark-scrollbar {
$scrollbar-color: (
"default": rgba(255,255,255,0.2),
"hover": rgba(255,255,255,0.3)
"default": $--n-scrollbar-background-color,
"hover": $--n-scrollbar-hover-background-color
) !global;
}

4
styles/themes/dark/components/Switch.scss
View File

@ -1,9 +1,9 @@
@mixin setup-dark-switch {
$--switch-rail-background-color: (
"inactive": rgba(148,151,155,0.4),
"inactive": $--n-rail-color,
"active": change-color($--n-primary-color, $alpha: .25)
)!global;
$--switch-switcher-color: (
$--switch-switcher-background-image: (
"inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(148,151,155,1) 75%,rgba(148,151,155,1) 100%),
"active": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(120,205,104,1) 75%,rgba(20,166,165,1) 100%)
) !global;

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

@ -10,16 +10,20 @@
$--alpha-4: .35 !global;
$--overlay-avatar: rgba(255, 255, 255, .16) !global;
$--overlay-rail: rgba(255, 255, 255, .14) !global;
$--overlay-border: rgba(255, 255, 255, .14) !global;
$--overlay-divider: rgba(255, 255, 255, .12) !global;
$--overlay-input: rgba(255, 255, 255, .12) !global;
$--overlay-input: rgba(255, 255, 255, .1) !global;
$--overlay-action: rgba(255, 255, 255, .05) !global;
$--overlay-scrollbar: rgba(255, 255, 255, .2) !global;
$--overlay-scrollbar-hover: rgba(255, 255, 255, .3) !global;
$--overlay-disabled: null !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-disabled: null !global;
$--primary-hover: #7fe7c4 !global;
$--primary-default: #63e2b7 !global;

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

@ -94,9 +94,13 @@
$--n-action-background-color: $--overlay-action !global;
$--n-table-header-background-color: $--overlay-action !global;
$--n-rail-color: $--overlay-rail !global;
$--n-divider-color: $--overlay-divider !global;
$--n-border-color: $--overlay-border !global;
$--n-scrollbar-background-color: $--overlay-scrollbar !global;
$--n-scrollbar-hover-background-color: $--overlay-scrollbar-hover !global;
$--n-close-hover-color: $--text-2 !global;
$--n-close-color: $--text-3 !global;
$--n-disabled-close-color: $--text-4 !global;
@ -106,6 +110,10 @@
$--n-card-background-color: $--neutral-card !global;
$--n-modal-background-color: $--neutral-modal !global;
$--n-body-background-color: $--neutral-body !global;
$--n-input-background-color: $--overlay-input !global;
$--n-disabled-opacity: .45 !global;
$--n-disabled-background-color: $--overlay-disabled !global;
@if ($in-js-env != true) {
@include setup-dark-divider;

2
styles/themes/light/components/Anchor.scss
View File

@ -1,5 +1,5 @@
@mixin setup-light-anchor {
$--anchor-rail-background-color: #d9d9d9 !global;
$--anchor-rail-background-color: $--n-rail-color !global;
$--anchor-link-title-text-color: (
'default': $--n-primary-text-color,
'hover': $--n-primary-color,

4
styles/themes/light/components/Button.scss
View File

@ -83,8 +83,8 @@
"default-hover": mix($--n-default-color, white, 8%),
"default-active": mix($--n-default-color, white, 12%),
"primary": $--n-primary-color,
"primary-focus": $--n-info-hover-color,
"primary-hover": $--n-info-hover-color,
"primary-focus": $--n-primary-hover-color,
"primary-hover": $--n-primary-hover-color,
"primary-active": $--n-primary-active-color,
"info": $--n-info-color,
"info-focus": $--n-info-hover-color,

19
styles/themes/light/components/CheckBox.scss
View File

@ -1,14 +1,17 @@
@mixin setup-light-checkbox {
$--checkbox-font-color: $--n-secondary-text-color !global;
$--checkbox-border-color: $--n-border-color !global;
$--checkbox-border-color--active: $--n-primary-color !global;
$--checkbox-indeterminate-color: $--neutral-card !global;
$--checkbox-background-color: (
'default': rgba(255, 255, 255, 1),
'disabled': $--n-action-background-color
'default': $--n-card-background-color,
'disabled': $--n-disabled-background-color
) !global;
$--checkbox-icon-color: (
'default': $--n-card-background-color,
'disabled': $--n-disabled-text-color
) !global;
$--checkbox-border-color: (
'default': $--n-border-color,
'disabled': $--n-border-color,
'active': $--n-primary-color
) !global;
$--checkbox-disabled: $--text-4 !global;
$--checkbox-icon-fill: white !global;
$--checkbox-label-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color

17
styles/themes/light/components/Input.scss
View File

@ -1,7 +1,7 @@
@mixin setup-light-input {
$--input-color: (
'default': $--n-secondary-text-color,
'disabled': rgba(0, 0, 0, .3)
'disabled': $--n-disabled-text-color,
) !global;
$--input-caret-color: (
'default': $--n-primary-color,
@ -9,15 +9,18 @@
) !global;
$--input-placeholder-color: (
'default': $--n-disabled-text-color,
'disabled': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * 0.6)
) !global;
$--input-background-color: (
'default': rgb(255, 255, 255),
'disabled': $--n-action-background-color,
'focus': rgb(255, 255, 255),
'error-focus': rgb(255, 255, 255)
'default': $--n-card-background-color,
'disabled': $--n-disabled-background-color,
'focus': $--n-card-background-color,
'error-focus': $--n-card-background-color,
) !global;
$--input-icon-color: $--n-disabled-text-color !global;
$--input-icon-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * 0.6)
)!global;
$--input-border-mask-border-color: (
'default': transparent,
'hover': $--n-primary-hover-color,

10
styles/themes/light/components/InputNumber.scss
View File

@ -11,10 +11,10 @@
) !global;
$--input-number-text-decoration-color: $--n-secondary-text-color !global;
$--input-number-background-color: (
'default': rgb(255, 255, 255),
'disabled': $--neutral-body,
'focus': rgb(255, 255, 255),
'error-focus': rgb(255, 255, 255)
'default': $--n-card-background-color,
'disabled': $--n-disabled-background-color,
'focus': $--n-card-background-color,
'error-focus': $--n-card-background-color,
) !global;
$--input-number-text-color: (
'default': $--n-secondary-text-color,
@ -29,7 +29,7 @@
'default': $--neutral-body,
'hover': $--neutral-body,
'active': $--neutral-body,
'disabled': $--neutral-body
'disabled': $--n-disabled-background-color,
) !global;
$--input-number-caret-color: $--n-primary-color !global;
$--input-number-disabled-opacity: 1 !global;

2
styles/themes/light/components/Progress.scss
View File

@ -1,5 +1,5 @@
@mixin setup-light-progress {
$--progress-rail-color: $--n-divider-color !global;
$--progress-rail-color: change-color($--n-rail-color, $alpha: alpha($--n-rail-color) * 0.6) !global;
$--progress-fill-color: (
'default': $--n-info-color,
'info': $--n-info-color,

4
styles/themes/light/components/Scrollbar.scss
View File

@ -1,6 +1,6 @@
@mixin setup-light-scrollbar {
$scrollbar-color: (
"default": rgba(0,0,0,0.25),
"hover": rgba(0,0,0,0.40)
"default": $--n-scrollbar-background-color,
"hover": $--n-scrollbar-hover-background-color
) !global;
}

4
styles/themes/light/components/Switch.scss
View File

@ -1,9 +1,9 @@
@mixin setup-light-switch {
$--switch-rail-background-color:(
"inactive": $--n-divider-color,
"inactive": $--n-rail-color,
"active": $--n-primary-color
) !global;
$--switch-switcher-color: (
$--switch-switcher-background-image: (
"inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(148,151,155,1) 75%,rgba(148,151,155,1) 100%),
"active": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(120,205,104,1) 75%,rgba(20,166,165,1) 100%)
) !global;

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

@ -94,8 +94,12 @@
$--n-action-background-color: $--overlay-action !global;
$--n-table-header-background-color: $--overlay-action !global;
$--n-rail-color: $--overlay-rail !global;
$--n-divider-color: $--overlay-divider !global;
$--n-border-color: $--overlay-border !global;
$--n-scrollbar-background-color: $--overlay-scrollbar !global;
$--n-scrollbar-hover-background-color: $--overlay-scrollbar-hover !global;
$--n-close-hover-color: $--text-2 !global;
$--n-close-color: $--text-3 !global;
@ -106,6 +110,10 @@
$--n-card-background-color: $--neutral-card !global;
$--n-modal-background-color: $--neutral-modal !global;
$--n-body-background-color: $--neutral-body !global;
$--n-input-background-color: $--neutral-card !global;
$--n-disabled-opacity: .45 !global;
$--n-disabled-background-color: $--neutral-disabled !global;
@if ($in-js-env != true) {
@include setup-light-divider;

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

@ -10,15 +10,20 @@
$--alpha-4: .25 !global;
$--overlay-avatar: rgba(0, 0, 0, .25) !global;
$--overlay-border: rgba(0, 0, 0, .15) !global;
$--overlay-divider: rgba(0, 0, 0, .09) !global;
$--overlay-rail: rgba(0, 0, 0, .14) !global;
$--overlay-border: rgba(0, 0, 0, .14) !global;
$--overlay-divider: rgba(0, 0, 0, .10) !global;
$--overlay-input: rgba(0, 0, 0, .02) !global;
$--overlay-action: rgba(0, 0, 0, .02) !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;
$--neutral-popover: rgb(255, 255, 255) !global;
$--neutral-modal: rgb(255, 255, 255) !global;
$--neutral-card: rgb(255, 255, 255) !global;
$--neutral-body: rgb(250, 250, 250) !global;
$--neutral-disabled: rgb(245, 245, 245) !global;
$--primary-hover: #36ad6a !global;
$--primary-default:#18a058 !global;