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

refactor(styles/color): rename mix-color-with-alpha-color to composite-color

Browse Source
This commit is contained in:
07akioni 2020-03-21 15:02:38 +08:00
parent 42bc5a2f95
commit 40ca14ff0e
11 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@
) !global;
$--cascader-menu-box-shadow: $--n-popmenu-box-shadow !global;
$--cascader-menu-border-color: $--n-divider-color !global;
$--cascader-menu-tracking-rect-background-color: mix-color-with-alpha-color(
$--cascader-menu-tracking-rect-background-color: composite-color(
$--n-popover-background-color,
$--n-pending-overlay-color
) !global;

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

@ -2,8 +2,8 @@
@mixin setup-dark-data-table {
$--data-table-border-color: (
'default': mix-color-with-alpha-color($--n-card-background-color, $--n-divider-color),
'modal': mix-color-with-alpha-color($--n-modal-background-color, $--n-divider-color),
'default': composite-color($--n-card-background-color, $--n-divider-color),
'modal': composite-color($--n-modal-background-color, $--n-divider-color),
) !global;
$--data-table-header-text-color: $--n-primary-text-color !global;
$--data-table-fixed-column-box-shadow-color: rgba(0, 0, 0, .36) !global;
@ -12,14 +12,14 @@
'modal': $--n-modal-background-color
) !global;
$--data-table-header-background-color: (
'default': mix-color-with-alpha-color($--n-card-background-color, $--n-table-header-overlay-background-color),
'hover': mix-color-with-alpha-color(
mix-color-with-alpha-color($--n-card-background-color, $--n-table-header-overlay-background-color),
'default': composite-color($--n-card-background-color, $--n-table-header-overlay-background-color),
'hover': composite-color(
composite-color($--n-card-background-color, $--n-table-header-overlay-background-color),
$--n-pending-overlay-color
),
'modal': mix-color-with-alpha-color($--n-modal-background-color, $--n-table-header-overlay-background-color),
'modal-hover': mix-color-with-alpha-color(
mix-color-with-alpha-color($--n-modal-background-color, $--n-table-header-overlay-background-color),
'modal': composite-color($--n-modal-background-color, $--n-table-header-overlay-background-color),
'modal-hover': composite-color(
composite-color($--n-modal-background-color, $--n-table-header-overlay-background-color),
$--n-pending-overlay-color
)
) !global;
@ -27,8 +27,8 @@
'hover': $--n-pending-overlay-color
) !global;
$--data-table-row-background-color: (
'hover': mix-color-with-alpha-color($--n-card-background-color, $--n-pending-overlay-color),
'modal-hover': mix-color-with-alpha-color($--n-modal-background-color, $--n-pending-overlay-color),
'hover': composite-color($--n-card-background-color, $--n-pending-overlay-color),
'modal-hover': composite-color($--n-modal-background-color, $--n-pending-overlay-color),
) !global;
$--data-table-body-text-color: $--n-secondary-text-color !global;
$--data-table-button-color: (

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

@ -1,5 +1,5 @@
@mixin setup-light-avatar {
$--avatar-background-color: mix-color-with-alpha-color(
$--avatar-background-color: composite-color(
$--n-base-background-color,
$--n-avatar-overlay-background-color
) !global;

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

@ -1,5 +1,5 @@
@mixin setup-light-base-tracking-rect {
$--base-tracking-rect-background-color: mix-color-with-alpha-color(
$--base-tracking-rect-background-color: composite-color(
$--n-base-background-color,
$--n-pending-overlay-color
) !global;

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

@ -8,7 +8,7 @@
) !global;
$--cascader-menu-box-shadow: $--n-popmenu-box-shadow !global;
$--cascader-menu-border-color: $--n-divider-color !global;
$--cascader-menu-tracking-rect-background-color: mix-color-with-alpha-color(
$--cascader-menu-tracking-rect-background-color: composite-color(
$--n-base-background-color,
$--n-pending-overlay-color
) !global;

20
styles/themes/light/components/DataTable.scss
View File

@ -2,8 +2,8 @@
@mixin setup-light-data-table {
$--data-table-border-color: (
'default': mix-color-with-alpha-color($--n-card-background-color, $--n-divider-color),
'modal': mix-color-with-alpha-color($--n-modal-background-color, $--n-divider-color),
'default': composite-color($--n-card-background-color, $--n-divider-color),
'modal': composite-color($--n-modal-background-color, $--n-divider-color),
) !global;
$--data-table-header-text-color: $--n-primary-text-color !global;
$--data-table-fixed-column-box-shadow-color: rgba(0, 0, 0, .18) !global;
@ -12,14 +12,14 @@
'modal': $--n-modal-background-color
) !global;
$--data-table-header-background-color: (
'default': mix-color-with-alpha-color($--n-card-background-color, $--n-table-header-overlay-background-color),
'hover': mix-color-with-alpha-color(
mix-color-with-alpha-color($--n-card-background-color, $--n-table-header-overlay-background-color),
'default': composite-color($--n-card-background-color, $--n-table-header-overlay-background-color),
'hover': composite-color(
composite-color($--n-card-background-color, $--n-table-header-overlay-background-color),
$--n-pending-overlay-color
),
'modal': mix-color-with-alpha-color($--n-modal-background-color, $--n-table-header-overlay-background-color),
'modal-hover': mix-color-with-alpha-color(
mix-color-with-alpha-color($--n-modal-background-color, $--n-table-header-overlay-background-color),
'modal': composite-color($--n-modal-background-color, $--n-table-header-overlay-background-color),
'modal-hover': composite-color(
composite-color($--n-modal-background-color, $--n-table-header-overlay-background-color),
$--n-pending-overlay-color
)
) !global;
@ -27,8 +27,8 @@
'hover': $--n-pending-overlay-color
) !global;
$--data-table-row-background-color: (
'hover': mix-color-with-alpha-color($--n-card-background-color, $--n-pending-overlay-color),
'modal-hover': mix-color-with-alpha-color($--n-modal-background-color, $--n-pending-overlay-color),
'hover': composite-color($--n-card-background-color, $--n-pending-overlay-color),
'modal-hover': composite-color($--n-modal-background-color, $--n-pending-overlay-color),
) !global;
$--data-table-body-text-color: $--n-secondary-text-color !global;
$--data-table-button-color: (

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

@ -1,5 +1,5 @@
@mixin setup-light-descriptions {
$--descriptions-header-background-color: mix-color-with-alpha-color(
$--descriptions-header-background-color: composite-color(
$--n-card-background-color,
$--n-table-header-overlay-background-color
) !global;

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

@ -4,7 +4,7 @@
'default': $--n-card-background-color,
'modal': $--n-modal-background-color
) !global;
$--table-header-background-color: mix-color-with-alpha-color(
$--table-header-background-color: composite-color(
$--n-card-background-color,
$--n-table-header-overlay-background-color
) !global;

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

@ -3,7 +3,7 @@
'default': $--n-card-background-color
) !global;
$--transfer-list-header-background-color: (
'default': mix-color-with-alpha-color(
'default': composite-color(
$--n-card-background-color,
$--n-table-header-overlay-background-color
)

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

@ -49,7 +49,7 @@
$--typography-code-text-color: (
'default': $--n-secondary-text-color,
) !global;
$--typography-code-background-color: mix-color-with-alpha-color(
$--typography-code-background-color: composite-color(
$--n-base-background-color,
$--n-code-overlay-background-color
) !global;

12
styles/utils/color.scss
View File

@ -1,7 +1,11 @@
@function mix-color-with-alpha-color ($color, $alpha-color) {
$alpha-color-weight: percentage(alpha($alpha-color));
$temp-color-1: scale-color($color, $lightness: -$alpha-color-weight);
$temp-color-2: scale-color($alpha-color, $lightness: -(100% - $alpha-color-weight));
@function composite-color ($background-color, $color) {
$background-color-alpha: alpha($background-color);
@if $background-color-alpha != 1 {
@error "[naive-ui/styles/composite-color]: background-color isn't opaque.";
}
$color-weight: percentage(alpha($color));
$temp-color-1: scale-color($background-color, $lightness: -$color-weight);
$temp-color-2: scale-color($color, $lightness: -(100% - $color-weight));
@return rgb(
red($temp-color-1) + red($temp-color-2),
green($temp-color-1) + green($temp-color-2),