From 14d4028623a981f400bd5ee4d03c5e2aa6660146 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Wed, 19 Feb 2020 15:38:44 +0800 Subject: [PATCH] style: rename some vars --- styles/BaseSelectMenu.scss | 2 +- styles/Drawer.scss | 2 +- styles/Log.scss | 2 +- styles/Modal.scss | 2 +- styles/Typography.scss | 2 +- styles/Upload.scss | 2 +- styles/themes/dark/components/Card.scss | 2 +- styles/themes/dark/components/Cascader.scss | 6 ++--- styles/themes/dark/components/CheckBox.scss | 2 +- styles/themes/dark/components/DatePicker.scss | 4 ++-- .../themes/dark/components/Descriptions.scss | 2 +- styles/themes/dark/components/Divider.scss | 2 +- styles/themes/dark/components/Layout.scss | 2 +- styles/themes/dark/components/Modal.scss | 2 +- styles/themes/dark/components/Slider.scss | 2 +- styles/themes/dark/components/Tabs.scss | 2 +- styles/themes/dark/index.scss | 23 +++++++++---------- styles/themes/light/components/Button.scss | 20 +++++++--------- styles/themes/light/components/Card.scss | 2 +- styles/themes/light/components/Cascader.scss | 6 ++--- .../themes/light/components/DatePicker.scss | 2 +- .../themes/light/components/Descriptions.scss | 2 +- styles/themes/light/components/Modal.scss | 2 +- styles/themes/light/components/Table.scss | 4 ++-- styles/themes/light/components/Tabs.scss | 2 +- .../themes/light/components/TimePicker.scss | 2 +- styles/themes/light/index.scss | 22 +++++++++--------- 27 files changed, 60 insertions(+), 65 deletions(-) diff --git a/styles/BaseSelectMenu.scss b/styles/BaseSelectMenu.scss index 31dd53d11..cc1d26c77 100644 --- a/styles/BaseSelectMenu.scss +++ b/styles/BaseSelectMenu.scss @@ -97,7 +97,7 @@ } } @include e(action) { - border-top: 1px solid $--n-alpha-divider-color; + border-top: 1px solid $--n-divider-color; color: $--n-secondary-text-color; } @include m(multiple) { diff --git a/styles/Drawer.scss b/styles/Drawer.scss index e9f190bb3..2727730f7 100644 --- a/styles/Drawer.scss +++ b/styles/Drawer.scss @@ -29,7 +29,7 @@ padding: 16px 24px; position: absolute; pointer-events: all; - background-color: $--n-dialog-color; + background-color: $--n-modal-color; color: $--n-secondary-text-color; transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; } diff --git a/styles/Log.scss b/styles/Log.scss index 33ce864fe..17741d878 100644 --- a/styles/Log.scss +++ b/styles/Log.scss @@ -39,7 +39,7 @@ height: 34px; border-radius: 17px; color: $--n-secondary-text-color; - background-color: $--n-dialog-color; + background-color: $--n-modal-color; line-height: 34px; font-family: $--n-font-family; white-space: nowrap; diff --git a/styles/Modal.scss b/styles/Modal.scss index f4a947547..a03e4b38d 100644 --- a/styles/Modal.scss +++ b/styles/Modal.scss @@ -3,7 +3,7 @@ @include themes-mixin { @include b(modal-content) { @include b(card) { - background-color: $--n-dialog-color; + background-color: $--n-modal-color; } @include once { @include b(confirm) { diff --git a/styles/Typography.scss b/styles/Typography.scss index 940f5aad7..24cb60b6c 100644 --- a/styles/Typography.scss +++ b/styles/Typography.scss @@ -180,7 +180,7 @@ $--header-bar-width: ( border-radius: 3px; font-size: .9em; background-color: $--typography-code-background-color; - border: 1px solid $--n-alpha-border-color; + border: 1px solid $--n-border-color; } @include m(primary-depth) { color: $--n-primary-text-color; diff --git a/styles/Upload.scss b/styles/Upload.scss index d3a48ebe8..6efd7c635 100644 --- a/styles/Upload.scss +++ b/styles/Upload.scss @@ -28,7 +28,7 @@ background-color: $--n-action-panel-color; text-align: center; border-radius: 6px; - border: 1px dashed $--n-alpha-border-color; + border: 1px dashed $--n-border-color; padding: 24px; transition: border-color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier; &:hover { diff --git a/styles/themes/dark/components/Card.scss b/styles/themes/dark/components/Card.scss index dfb30e9e1..5aca9f7a7 100644 --- a/styles/themes/dark/components/Card.scss +++ b/styles/themes/dark/components/Card.scss @@ -2,7 +2,7 @@ $--card-background-color: $--n-card-color !global; $--card-text-color: $--n-secondary-text-color !global; $--card-title-text-color: $--n-primary-text-color !global; - $--card-border-color: $--n-alpha-divider-color !global; + $--card-border-color: $--n-divider-color !global; $--card-action-background-color: $--n-action-panel-color !global; $--card-close-fill: $--n-close-color !global; } \ No newline at end of file diff --git a/styles/themes/dark/components/Cascader.scss b/styles/themes/dark/components/Cascader.scss index 9b60f6d8c..9b77680e5 100644 --- a/styles/themes/dark/components/Cascader.scss +++ b/styles/themes/dark/components/Cascader.scss @@ -1,5 +1,5 @@ @mixin setup-dark-cascader { - $--cascader-menu-background-color: $--n-dialog-color !global; + $--cascader-menu-background-color: $--n-modal-color !global; $--cascader-option-text-color: ( 'default': $--n-secondary-text-color, 'active': $--n-primary-color, @@ -8,9 +8,9 @@ ) !global; $--cascader-menu-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global; $--cascader-menu-border-color: rgba(255, 255, 255, 0.1) !global; - $--cascader-menu-lightbar-background-color: mix($--primary-6, $--n-dialog-color, 20%) !global; + $--cascader-menu-lightbar-background-color: mix($--primary-6, $--n-modal-color, 20%) !global; $--cascader-option-arrow-background-color: rgba(255, 255, 255, 0.3) !global; - $--cascader-menu-mask-background-color: change-color($--n-dialog-color, $alpha: .75) !global; + $--cascader-menu-mask-background-color: change-color($--n-modal-color, $alpha: .75) !global; $--cascader-menu-mask-text-color: $--n-secondary-text-color !global; $--cascader-item-check-mark-color: $--n-primary-color !global; } \ No newline at end of file diff --git a/styles/themes/dark/components/CheckBox.scss b/styles/themes/dark/components/CheckBox.scss index 2399a4bc5..fd974bac4 100644 --- a/styles/themes/dark/components/CheckBox.scss +++ b/styles/themes/dark/components/CheckBox.scss @@ -9,7 +9,7 @@ 'disabled': rgba(255, 255, 255, 0.16) ) !global; $--checkbox-disabled: $border-color !global; - $--checkbox-icon-fill: $--n-background-color !global; + $--checkbox-icon-fill: $--n-body-color !global; $--checkbox-label-text-color: ( 'default': $--n-secondary-text-color, 'disabled': $--n-disabled-text-color diff --git a/styles/themes/dark/components/DatePicker.scss b/styles/themes/dark/components/DatePicker.scss index e6e80238f..4fa1353e4 100644 --- a/styles/themes/dark/components/DatePicker.scss +++ b/styles/themes/dark/components/DatePicker.scss @@ -5,12 +5,12 @@ $--date-picker-item-text-color: ( 'inactive': $--n-disabled-text-color, 'default': $--n-secondary-text-color, - 'active': $--n-dialog-color, + 'active': $--n-modal-color, 'current': $--primary-6 ) !global; $--date-picker-item-sup-color: ( 'default': $--primary-6, - 'active': $--n-dialog-color + 'active': $--n-modal-color ) !global; $--date-picker-month-text-color: $--n-primary-text-color !global; $--date-picker-item-background-color: ( diff --git a/styles/themes/dark/components/Descriptions.scss b/styles/themes/dark/components/Descriptions.scss index c5da58503..039a3eb47 100644 --- a/styles/themes/dark/components/Descriptions.scss +++ b/styles/themes/dark/components/Descriptions.scss @@ -3,5 +3,5 @@ $--descriptions-header-text-color: $--n-primary-text-color !global; $--descriptions-content-text-color: $--n-secondary-text-color !global; $--descriptions-content-background-color: $--n-card-color !global; - $--descriptions-border-color: $--n-alpha-border-color !global; + $--descriptions-border-color: $--n-border-color !global; } \ No newline at end of file diff --git a/styles/themes/dark/components/Divider.scss b/styles/themes/dark/components/Divider.scss index ddaadcaf8..af671d1a6 100644 --- a/styles/themes/dark/components/Divider.scss +++ b/styles/themes/dark/components/Divider.scss @@ -1,4 +1,4 @@ @mixin setup-dark-divider { $--divider-text-color: $--n-primary-text-color !global; - $--divider-border-color: $--n-alpha-divider-color !global; + $--divider-border-color: $--n-divider-color !global; } \ No newline at end of file diff --git a/styles/themes/dark/components/Layout.scss b/styles/themes/dark/components/Layout.scss index 8bd9fd75b..510051d77 100644 --- a/styles/themes/dark/components/Layout.scss +++ b/styles/themes/dark/components/Layout.scss @@ -1,6 +1,6 @@ @mixin setup-dark-layout { $--layout-text-color: $--n-secondary-text-color !global; - $--layout-background-color: $--n-background-color !global; + $--layout-background-color: $--n-body-color !global; $--layout-header-background-color: $--n-card-color !global; $--layout-header-border-color: $--n-divider-color !global; $--layout-footer-border-color: $--n-divider-color !global; diff --git a/styles/themes/dark/components/Modal.scss b/styles/themes/dark/components/Modal.scss index e4c393146..02b297c63 100644 --- a/styles/themes/dark/components/Modal.scss +++ b/styles/themes/dark/components/Modal.scss @@ -1,4 +1,4 @@ @mixin setup-dark-modal { - $--modal-background-color: $--n-dialog-color !global; + $--modal-background-color: $--n-modal-color !global; $--modal-text-color: $--n-secondary-text-color !global; } \ No newline at end of file diff --git a/styles/themes/dark/components/Slider.scss b/styles/themes/dark/components/Slider.scss index 75d49d843..016d143eb 100644 --- a/styles/themes/dark/components/Slider.scss +++ b/styles/themes/dark/components/Slider.scss @@ -14,7 +14,7 @@ 'active': (inset 0 0 0 2px $--primary-6, 0 0 0 3px change-color($--primary-6, $alpha: .2)), 'focus': (inset 0 0 0 2px $--primary-6, 0 0 0 3px change-color($--primary-6, $alpha: .2)) ) !global; - $--slider-indicator-background-color: $--n-dialog-color !global; + $--slider-indicator-background-color: $--n-modal-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-dot-box-shadow: ( diff --git a/styles/themes/dark/components/Tabs.scss b/styles/themes/dark/components/Tabs.scss index c2d012032..019b84743 100644 --- a/styles/themes/dark/components/Tabs.scss +++ b/styles/themes/dark/components/Tabs.scss @@ -20,6 +20,6 @@ 'default': $--n-secondary-text-color, 'active': $--n-primary-text-color ) !global; - $--tabs-nav-border-color: $--n-alpha-divider-color !global; + $--tabs-nav-border-color: $--n-divider-color !global; $--tabs-panel-text-color: $--n-secondary-text-color !global; } \ No newline at end of file diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss index daf28c32a..4546714de 100644 --- a/styles/themes/dark/index.scss +++ b/styles/themes/dark/index.scss @@ -59,6 +59,7 @@ @mixin setup-dark-theme($in-js-env: false) { @include setup-dark-colors(); + $--n-default-color: $--primary-6 !global; $--n-primary-color: $--primary-6 !global; $--n-info-color: $--info-6 !global; $--n-success-color: $--success-6 !global; @@ -71,20 +72,18 @@ $--n-disabled-text-color: $--text-4 !global; $--n-action-panel-color: $--overlay-action !global; + $--n-table-header-color: $--overlay-action !global; $--n-close-color: $--text-3 !global; - $--n-popover-color: $--neutral-1 !global; - $--n-divider-color: $--neutral-6 !global; - $--n-alpha-divider-color: $--overlay-6 !global; - $--n-border-color: $--neutral-7 !global; - $--n-alpha-border-color: $--overlay-7 !global; - $--n-table-header-color: $--neutral-8 !global; - $--n-alpha-table-header-color: $--overlay-8 !global; - $--n-table-body-color: $--neutral-9 !global; - $--n-card-color: $--neutral-9 !global; - $--n-dialog-color: $--neutral-3 !global; - $--n-background-color: $--neutral-10 !global; - $--n-alpha-input-color: rgba(255, 255, 255, .12) !global; + $--n-divider-color: $--overlay-divider !global; + $--n-border-color: $--overlay-border !global; + + $--n-popover-color: $--neutral-popover !global; + $--n-table-body-color: $--neutral-card !global; + $--n-card-color: $--neutral-card !global; + $--n-modal-color: $--neutral-modal !global; + $--n-body-color: $--neutral-body !global; + @if ($in-js-env != true) { @include setup-dark-divider; @include setup-dark-scrollbar; diff --git a/styles/themes/light/components/Button.scss b/styles/themes/light/components/Button.scss index 65deb4f04..d49b1fbdf 100644 --- a/styles/themes/light/components/Button.scss +++ b/styles/themes/light/components/Button.scss @@ -77,15 +77,11 @@ $button-ghost-hover-alpha: .1; $button-ghost-active-alpha: .15; $button-ghost-focus-alpha: .1; - $button-ghost-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-alpha); - $button-ghost-hover-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-hover-alpha); - $button-ghost-active-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-active-alpha); - $button-ghost-focus-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-focus-alpha); $--button-background-color: ( - "default": mix($--n-border-color, white, $button-ghost-weight), - "default-focus": mix($--n-border-color, white, $button-ghost-focus-weight), - "default-hover": mix($--n-border-color, white, $button-ghost-hover-weight), - "default-active": mix($--n-border-color, white, $button-ghost-active-weight), + "default": mix($--n-default-color, white, 0), + "default-focus": mix($--n-default-color, white, 8%), + "default-hover": mix($--n-default-color, white, 8%), + "default-active": mix($--n-default-color, white, 12%), "primary": $--primary-6, "primary-focus": $--primary-5, "primary-hover": $--primary-5, @@ -108,10 +104,10 @@ "error-active": $--error-7, ) !global; $--ghost-button-background-color: ( - "default": change-color($--n-secondary-text-color, $alpha: $button-ghost-alpha), - "default-focus": change-color($--n-secondary-text-color, $alpha: $button-ghost-focus-alpha), - "default-hover": change-color($--n-secondary-text-color, $alpha: $button-ghost-hover-alpha), - "default-active": change-color($--n-secondary-text-color, $alpha: $button-ghost-active-alpha), + "default": change-color($--n-secondary-text-color, $alpha: 0), + "default-focus": change-color($--n-secondary-text-color, $alpha: .08), + "default-hover": change-color($--n-secondary-text-color, $alpha: .08), + "default-active": change-color($--n-secondary-text-color, $alpha: .12), "primary": change-color($--primary-6, $alpha: $button-ghost-alpha), "primary-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha), "primary-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha), diff --git a/styles/themes/light/components/Card.scss b/styles/themes/light/components/Card.scss index cd3ece0e1..70ff89822 100644 --- a/styles/themes/light/components/Card.scss +++ b/styles/themes/light/components/Card.scss @@ -2,7 +2,7 @@ $--card-background-color: $--n-card-color !global; $--card-text-color: $--n-secondary-text-color !global; $--card-title-text-color: $--n-primary-text-color !global; - $--card-border-color: $--n-alpha-divider-color !global; + $--card-border-color: $--n-divider-color !global; $--card-action-background-color: $--n-table-header-color !global; $--card-close-fill: $--n-close-color !global; } \ No newline at end of file diff --git a/styles/themes/light/components/Cascader.scss b/styles/themes/light/components/Cascader.scss index a17b79730..ec232492c 100644 --- a/styles/themes/light/components/Cascader.scss +++ b/styles/themes/light/components/Cascader.scss @@ -1,5 +1,5 @@ @mixin setup-light-cascader { - $--cascader-menu-background-color: $--n-dialog-color !global; + $--cascader-menu-background-color: $--n-modal-color !global; $--cascader-option-text-color: ( 'default': $--n-secondary-text-color, 'active': $--n-primary-color, @@ -8,9 +8,9 @@ ) !global; $--cascader-menu-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global; $--cascader-menu-border-color: $--n-divider-color !global; - $--cascader-menu-lightbar-background-color: mix($--n-primary-color, $--n-dialog-color, 15%) !global; + $--cascader-menu-lightbar-background-color: mix($--n-primary-color, $--n-modal-color, 15%) !global; $--cascader-option-arrow-background-color: rgba(0, 0, 0, 0.2) !global; - $--cascader-menu-mask-background-color: change-color($--n-dialog-color, $alpha: .75) !global; + $--cascader-menu-mask-background-color: change-color($--n-modal-color, $alpha: .75) !global; $--cascader-menu-mask-text-color: $--n-secondary-text-color !global; $--cascader-item-check-mark-color: $--n-primary-color !global; } \ No newline at end of file diff --git a/styles/themes/light/components/DatePicker.scss b/styles/themes/light/components/DatePicker.scss index 6a383d97d..9c04106d8 100644 --- a/styles/themes/light/components/DatePicker.scss +++ b/styles/themes/light/components/DatePicker.scss @@ -5,7 +5,7 @@ $--date-picker-item-text-color: ( 'inactive': $--n-disabled-text-color, 'default': $--n-secondary-text-color, - 'active': $--n-dialog-color, + 'active': $--n-modal-color, 'current': $--primary-6 ) !global; $--date-picker-item-sup-color: ( diff --git a/styles/themes/light/components/Descriptions.scss b/styles/themes/light/components/Descriptions.scss index 14c496462..c80c7a8ea 100644 --- a/styles/themes/light/components/Descriptions.scss +++ b/styles/themes/light/components/Descriptions.scss @@ -3,5 +3,5 @@ $--descriptions-header-text-color: $--n-primary-text-color !global; $--descriptions-content-text-color: $--n-secondary-text-color !global; $--descriptions-content-background-color: $--n-card-color !global; - $--descriptions-border-color: $--n-alpha-border-color !global; + $--descriptions-border-color: $--n-border-color !global; } \ No newline at end of file diff --git a/styles/themes/light/components/Modal.scss b/styles/themes/light/components/Modal.scss index 9d857eeba..f5f8d8643 100644 --- a/styles/themes/light/components/Modal.scss +++ b/styles/themes/light/components/Modal.scss @@ -1,4 +1,4 @@ @mixin setup-light-modal { - $--modal-background-color: $--n-dialog-color !global; + $--modal-background-color: $--n-modal-color !global; $--modal-text-color: $--n-secondary-text-color !global; } \ No newline at end of file diff --git a/styles/themes/light/components/Table.scss b/styles/themes/light/components/Table.scss index 77b964e82..4a9d7074d 100644 --- a/styles/themes/light/components/Table.scss +++ b/styles/themes/light/components/Table.scss @@ -1,9 +1,9 @@ @mixin setup-light-table { - $--table-header-background-color: $--n-background-color !global; + $--table-header-background-color: $--n-body-color !global; $--table-body-background-color: $--n-card-color !global; $--table-header-text-color: $--text-1 !global; $--table-body-text-color: $--text-2 !global; - $--table-row-hover: $--n-background-color !global; + $--table-row-hover: $--n-body-color !global; $--table-border: 1px solid $--n-divider-color !global; $--table-td-border-right: 1px solid $--n-divider-color !global; $--data-table-border-color: $--n-divider-color !global; diff --git a/styles/themes/light/components/Tabs.scss b/styles/themes/light/components/Tabs.scss index 8917b9180..684043fe2 100644 --- a/styles/themes/light/components/Tabs.scss +++ b/styles/themes/light/components/Tabs.scss @@ -19,6 +19,6 @@ 'default': $--n-secondary-text-color, 'active': $--n-primary-text-color ) !global; - $--tabs-nav-border-color: $--n-alpha-divider-color !global; + $--tabs-nav-border-color: $--n-divider-color !global; $--tabs-panel-text-color: $--n-secondary-text-color !global; } \ No newline at end of file diff --git a/styles/themes/light/components/TimePicker.scss b/styles/themes/light/components/TimePicker.scss index eb2940810..296a983c0 100644 --- a/styles/themes/light/components/TimePicker.scss +++ b/styles/themes/light/components/TimePicker.scss @@ -1,5 +1,5 @@ @mixin setup-light-time-picker { - $--time-picker-background-color: $--n-dialog-color !global; + $--time-picker-background-color: $--n-modal-color !global; $--time-picker-text-color: ( 'default': $--n-secondary-text-color, 'active': $--n-primary-color diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss index 31315abee..4427996b3 100644 --- a/styles/themes/light/index.scss +++ b/styles/themes/light/index.scss @@ -59,6 +59,7 @@ @mixin setup-light-theme($in-js-env: false) { @include setup-light-colors(); + $--n-default-color: black !global; $--n-primary-color: $--primary-6 !global; $--n-info-color: $--info-6 !global; $--n-success-color: $--success-6 !global; @@ -71,19 +72,18 @@ $--n-disabled-text-color: $--text-4 !global; $--n-action-panel-color: $--overlay-action !global; + $--n-table-header-color: $--overlay-action !global; $--n-close-color: $--text-3 !global; - $--n-divider-color: $--neutral-7 !global; - $--n-alpha-divider-color: $--overlay-7 !global; - $--n-border-color: $--neutral-6 !global; - $--n-alpha-border-color: $--overlay-6 !global; - $--n-popover-color: $--neutral-10 !global; - $--n-table-header-color: $--neutral-9 !global; - $--n-card-color: $--neutral-10 !global; - $--n-dialog-color: $--neutral-10 !global; - $--n-table-body-color: $--neutral-10 !global; - $--n-background-color: $--neutral-9 !global; - $--n-alpha-input-color: rgba(0, 0, 0, .04) !global; + $--n-divider-color: $--overlay-divider !global; + $--n-border-color: $--overlay-border !global; + + $--n-popover-color: $--neutral-popover !global; + $--n-table-body-color: $--neutral-card !global; + $--n-card-color: $--neutral-card !global; + $--n-modal-color: $--neutral-modal !global; + $--n-body-color: $--neutral-body !global; + @if ($in-js-env != true) { @include setup-light-divider; @include setup-light-scrollbar;