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

styles: refactor color system, wip

Browse Source
This commit is contained in:
07akioni 2020-02-20 15:26:12 +08:00
parent e8244b6b03
commit eec1b6fce1
27 changed files with 83 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
styles/Button.scss
View File

@ -274,7 +274,7 @@
}
@include m(disabled) {
cursor: not-allowed;
opacity: .45;
}
&::-moz-focus-inner {
border: 0;
@ -284,6 +284,9 @@
@include button-size-mixin('medium');
@include button-size-mixin('large');
}
@include m(disabled) {
opacity: $--button-disabled-opacity;
}
@include button-type-mixin('default');
@include button-type-mixin('primary');
@include button-type-mixin('info');

21
styles/Icon.scss
View File

@ -14,16 +14,25 @@
width: 1em;
}
@include m(primary-depth) {
fill: $--n-primary-text-color;
stroke: $--n-primary-text-color;
fill: $--n-base-text-color;
stroke: $--n-base-text-color;
svg {
opacity: $--n-primary-opacity;
}
}
@include m(secondary-depth) {
fill: $--n-secondary-text-color;
stroke: $--n-secondary-text-color;
fill: $--n-base-text-color;
stroke:$--n-base-text-color;
svg {
opacity: $--n-secondary-opacity;
}
}
@include m(tertiary-depth) {
fill: $--n-tertiary-text-color;
stroke: $--n-tertiary-text-color;
fill: $--n-base-text-color;
stroke: $--n-base-text-color;
svg {
opacity: $--n-tertiary-opacity;
}
}
}
}

2
styles/Slider.scss
View File

@ -133,7 +133,7 @@
margin-bottom: 12px;
border-radius: 4px;
}
color: $--slider-indicator-color;
color: $--slider-indicator-text-color;
background-color: $--slider-indicator-background-color;
box-shadow: $--slider-indicator-box-shadow;
}

1
styles/themes/dark/components/Button.scss
View File

@ -171,4 +171,5 @@
"error-active": $--n-error-active-color,
"error-focus": $--n-error-hover-color
) !global;
$--button-disabled-opacity: $--n-disabled-opacity !global;
}

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

@ -9,6 +9,6 @@
$--cascader-menu-box-shadow: $--n-popover-box-shadow !global;
$--cascader-menu-border-color: $--n-divider-color !global;
$--cascader-menu-lightbar-background-color: mix($--n-primary-color, $--n-modal-background-color, 15%) !global;
$--cascader-option-arrow-background-color: $--n-disabled-text-color !global;
$--cascader-option-arrow-background-color: $--n-icon-color !global;
$--cascader-item-check-mark-color: $--n-primary-color !global;
}

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

@ -5,7 +5,7 @@
) !global;
$--checkbox-icon-color: (
'default': $--n-body-background-color,
'disabled': $--n-disabled-text-color
'disabled': $--n-icon-color
) !global;
$--checkbox-border-color: (
'default': $--n-border-color,
@ -14,6 +14,6 @@
) !global;
$--checkbox-label-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
'disabled': $--n-icon-color
) !global;
}

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

@ -1,7 +1,7 @@
@mixin setup-dark-date-picker {
$--date-picker-background-color: $--n-popover-background-color !global;
$--date-picker-text-color: $--n-secondary-text-color !global;
$--date-picker-icon-color: $--n-disabled-text-color !global;
$--date-picker-icon-color: $--n-icon-color !global;
$--date-picker-item-text-color: (
'inactive': $--n-disabled-text-color,
'default': $--n-secondary-text-color,

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

@ -1,5 +1,5 @@
@mixin setup-dark-empty {
$--empty-text-color: $--n-disabled-text-color !global;
$--empty-icon-color: $--n-disabled-text-color !global;
$--empty-icon-color: $--n-icon-color !global;
$--empty-extra-text-color: $--n-secondary-text-color !global;
}

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

@ -8,8 +8,8 @@
'error': $--n-error-color
) !global;
$--input-placeholder-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * $--n-disabled-opacity),
'default': $--n-placeholder-text-color,
'disabled': change-color($--n-placeholder-text-color, $alpha: alpha($--n-placeholder-text-color) * $--n-disabled-opacity),
) !global;
$--input-background-color: (
'default': $--n-input-background-color,
@ -18,8 +18,8 @@
'error-focus': change-color($--n-error-color, $alpha: 0.1),
) !global;
$--input-icon-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * $--n-disabled-opacity),
'default': $--n-icon-color,
'disabled': change-color($--n-icon-color, $alpha: alpha($--n-icon-color) * $--n-disabled-opacity),
)!global;
$--input-border-mask-border-color: (
'default': transparent,

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

@ -7,8 +7,8 @@
)!global;
$--input-number-text-decoration-color: $--n-secondary-text-color !global;
$--input-number-placeholder-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * 0.6),
'default': $--n-placeholder-text-color,
'disabled': change-color($--n-placeholder-text-color, $alpha: alpha($--n-placeholder-text-color) * 0.6),
) !global;
$--input-number-background-color: (
'default': $--n-input-background-color,

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

@ -6,7 +6,7 @@
"warning": white,
"loading": $--n-secondary-text-color
) !global;
$--message-icon-color: $--n-disabled-text-color !global;
$--message-icon-color: $--n-icon-color !global;
$--message-background-color: (
"info": $--n-info-hs-color,
"success": $--n-success-hs-color,

17
styles/themes/dark/components/Slider.scss
View File

@ -1,24 +1,25 @@
@mixin setup-dark-slider {
$slider-default-fill-color: mix($--n-primary-color, $--n-card-background-color, 70%);
$--slider-rail-background-color: (
'default': rgba(255, 255, 255, .2),
'hover': rgba(255, 255, 255, .3)
'default': $--n-rail-color,
'hover': change-color($--n-rail-color, $alpha: alpha($--n-rail-color) * 1.5)
) !global;
$--slider-rail-fill-background-color: (
'default': #49A586,
'default': $slider-default-fill-color,
'hover': $--n-primary-color
) !global;
$--slider-handle-background-color: black !global;
$--slider-handle-background-color: $--n-body-background-color !global;
$--slider-handle-box-shadow: (
'default': inset 0 0 0 2px #49A586,
'default': inset 0 0 0 2px $slider-default-fill-color,
'hover': inset 0 0 0 2px $--n-primary-color,
'active': (inset 0 0 0 2px $--n-primary-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2)),
'focus': (inset 0 0 0 2px $--n-primary-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2))
) !global;
$--slider-indicator-background-color: $--neutral-card !global;
$--slider-indicator-background-color: $--n-popover-background-color !global;
$--slider-indicator-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;
$--slider-indicator-color: $--n-secondary-text-color !global;
$--slider-indicator-text-color: $--n-secondary-text-color !global;
$--slider-dot-box-shadow: (
'default': inset 0 0 0 2px #49A586,
'default': inset 0 0 0 2px $slider-default-fill-color,
'active': inset 0 0 0 2px $--n-primary-color
) !global;
}

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

@ -7,8 +7,8 @@
) !global;
$--tabs-tab-bar-background-color: $--n-primary-color !global;
$--tabs-tab-scroll-button-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * $--n-disabled-opacity)
'default': $--n-icon-color,
'disabled': change-color($--n-icon-color, $alpha: alpha($--n-icon-color) * $--n-disabled-opacity)
) !global;
$--tabs-tab-close-button-color: (
'default': $--n-close-color

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

@ -1,5 +1,5 @@
@mixin setup-dark-colors {
$--text-base: rgb(255, 255, 255) !global;
$--base-text: rgb(255, 255, 255) !global;
$--overlay-text-1: rgba(255, 255, 255, .92) !global;
$--overlay-text-2: rgba(255, 255, 255, .84) !global;
$--overlay-text-3: rgba(255, 255, 255, .50) !global;
@ -13,7 +13,7 @@
$--alpha-disabled: .5 !global;
$--overlay-avatar: rgba(255, 255, 255, .16) !global;
$--overlay-rail: rgba(255, 255, 255, .14) !global;
$--overlay-rail: rgba(255, 255, 255, .18) !global;
$--overlay-border: rgba(255, 255, 255, .14) !global;
$--overlay-divider: rgba(255, 255, 255, .12) !global;
$--overlay-input: rgba(255, 255, 255, .1) !global;

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

@ -91,6 +91,14 @@
$--n-secondary-text-color: $--overlay-text-2 !global;
$--n-tertiary-text-color: $--overlay-text-3 !global;
$--n-disabled-text-color: $--overlay-text-4 !global;
$--n-placeholder-text-color: $--overlay-text-4 !global;
$--n-base-text-color: $--base-text !global;
$--n-primary-opacity: $--alpha-1 !global;
$--n-secondary-opacity: $--alpha-2 !global;
$--n-tertiary-opacity: $--alpha-3 !global;
$--n-icon-color: $--overlay-text-4 !global;
$--n-action-background-color: $--overlay-action !global;
$--n-table-header-background-color: $--overlay-action !global;

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

@ -7,8 +7,8 @@
'error-active': white
) !global;
$--base-selection-placeholder-color: (
'default': $--n-disabled-text-color,
'disabled': $--n-disabled-text-color,
'default': $--n-placeholder-text-color,
'disabled': change-color($--n-placeholder-text-color, $alpha: alpha($--n-placeholder-text-color) * $--n-disabled-opacity)
) !global;
$--base-selection-border-mask-border-color: (
'default': transparent,

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

@ -171,4 +171,5 @@
"error-active": $--n-error-active-color,
"error-focus": $--n-error-hover-color,
) !global;
$--button-disabled-opacity: $--n-disabled-opacity !global;
}

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

@ -1,7 +1,7 @@
@mixin setup-light-date-picker {
$--date-picker-background-color: white !global;
$--date-picker-text-color: $--n-secondary-text-color !global;
$--date-picker-icon-color: $--n-disabled-text-color !global;
$--date-picker-icon-color: $--n-icon-color !global;
$--date-picker-item-text-color: (
'inactive': $--n-disabled-text-color,
'default': $--n-secondary-text-color,

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

@ -1,5 +1,5 @@
@mixin setup-light-empty {
$--empty-text-color: $--n-disabled-text-color !global;
$--empty-icon-color: $--n-disabled-text-color !global;
$--empty-icon-color: $--n-icon-color !global;
$--empty-extra-text-color: $--n-secondary-text-color !global;
}

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

@ -8,8 +8,8 @@
'error': $--n-error-color
) !global;
$--input-placeholder-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * $--n-disabled-opacity)
'default': $--n-placeholder-text-color,
'disabled': change-color($--n-placeholder-text-color, $alpha: alpha($--n-placeholder-text-color) * $--n-disabled-opacity)
) !global;
$--input-background-color: (
'default': $--n-card-background-color,
@ -18,8 +18,8 @@
'error-focus': $--n-card-background-color,
) !global;
$--input-icon-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * $--n-disabled-opacity)
'default': $--n-icon-color,
'disabled': change-color($--n-icon-color, $alpha: alpha($--n-icon-color) * $--n-disabled-opacity)
)!global;
$--input-border-mask-border-color: (
'default': transparent,

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

@ -6,8 +6,8 @@
'error': $--n-error-color
)!global;
$--input-number-placeholder-color: (
"default": $--n-disabled-text-color,
"disabled": $--n-disabled-text-color,
"default": $--n-placeholder-text-color,
"disabled": $--n-placeholder-text-color,
) !global;
$--input-number-text-decoration-color: $--n-secondary-text-color !global;
$--input-number-background-color: (

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

@ -6,7 +6,7 @@
"warning": white,
"loading": $--n-secondary-text-color
) !global;
$--message-icon-color: $--n-disabled-text-color !global;
$--message-icon-color: $--n-icon-color !global;
$--message-background-color: (
"info": $--n-info-color,
"success": $--n-success-color,

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

@ -1,7 +1,7 @@
@mixin setup-light-slider {
$--slider-rail-background-color: (
'default': rgba(0, 0, 0, .2),
'hover': rgba(0, 0, 0, .15)
'default': $--n-rail-color,
'hover': change-color($--n-rail-color, $alpha: alpha($--n-rail-color) * 0.75)
) !global;
$--slider-rail-fill-background-color: (
'default': $--n-primary-color,
@ -14,9 +14,9 @@
'active': (inset 0 0 0 2px $--n-primary-hover-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2)),
'focus': (inset 0 0 0 2px $--n-primary-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2))
) !global;
$--slider-indicator-background-color: $--neutral-card !global;
$--slider-indicator-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;
$--slider-indicator-color: white !global;
$--slider-indicator-background-color: rgba(0, 0, 0, .85) !global;
$--slider-indicator-box-shadow: $--n-popover-box-shadow !global;
$--slider-indicator-text-color: white !global;
$--slider-dot-box-shadow: (
'default': inset 0 0 0 2px $--n-primary-color,
'active': inset 0 0 0 2px $--n-primary-hover-color

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

@ -7,8 +7,8 @@
) !global;
$--tabs-tab-bar-background-color: $--n-primary-color !global;
$--tabs-tab-scroll-button-color: (
'default': $--n-disabled-text-color,
'disabled': change-color($--n-disabled-text-color, $alpha: alpha($--n-disabled-text-color) * $--n-disabled-opacity)
'default': $--n-icon-color,
'disabled': change-color($--n-icon-color, $alpha: alpha($--n-icon-color) * $--n-disabled-opacity)
) !global;
$--tabs-tab-close-button-color: (
'default': $--n-close-color

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

@ -1,5 +1,5 @@
@mixin setup-light-tooltip {
$--tooltip-background-color: $--overlay-text-1 !global;
$--tooltip-background-color: rgba(0, 0, 0, .85) !global;
$--tooltip-color: rgb(255, 255, 255) !global;
$--tooltip-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08) !global;
}

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

@ -91,6 +91,13 @@
$--n-secondary-text-color: $--overlay-text-2 !global;
$--n-tertiary-text-color: $--overlay-text-3 !global;
$--n-disabled-text-color: $--overlay-text-4 !global;
$--n-placeholder-text-color: $--overlay-text-4 !global;
$--n-base-text-color: $--base-text !global;
$--n-primary-opacity: $--alpha-1 !global;
$--n-secondary-opacity: $--alpha-2 !global;
$--n-tertiary-opacity: $--alpha-3 !global;
$--n-icon-color: $--overlay-text-4 !global;
$--n-action-background-color: $--overlay-action !global;
$--n-table-header-background-color: $--overlay-action !global;

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

@ -1,5 +1,5 @@
@mixin setup-light-colors {
$--text-base: rgb(0, 0, 0) !global;
$--base-text: rgb(0, 0, 0) !global;
$--overlay-text-1: rgba(0, 0, 0, .9) !global;
$--overlay-text-2: rgba(0, 0, 0, .75) !global;
@ -11,7 +11,7 @@
$--alpha-3: .45 !global;
$--alpha-4: .25 !global;
$--alpha-disabled: .45 !global;
$--alpha-disabled: .5 !global;
$--overlay-avatar: rgba(0, 0, 0, .25) !global;
$--overlay-rail: rgba(0, 0, 0, .14) !global;