From 8cfc654df9f14724f0fd5261b0e90a2faed59b78 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Thu, 18 Nov 2021 18:59:26 +0800
Subject: [PATCH] fix(ui/select, darkmode): fix select disabled color lose, fix
 darkmode color

affects: @varlet/ui
---
 packages/varlet-ui/src/icon/example/index.vue     |  2 +-
 packages/varlet-ui/src/pagination/pagination.less |  3 +++
 packages/varlet-ui/src/select/Select.vue          |  6 +++++-
 packages/varlet-ui/src/styles/example/index.vue   | 13 +++++++++++--
 packages/varlet-ui/src/themes/dark/button.ts      |  2 +-
 packages/varlet-ui/src/themes/dark/card.ts        |  2 +-
 packages/varlet-ui/src/themes/dark/collapse.ts    |  2 +-
 packages/varlet-ui/src/themes/dark/datePicker.ts  |  2 +-
 packages/varlet-ui/src/themes/dark/divider.ts     |  2 +-
 packages/varlet-ui/src/themes/dark/index.ts       |  3 ++-
 packages/varlet-ui/src/themes/dark/pagination.ts  |  3 ++-
 packages/varlet-ui/src/themes/dark/pullRefresh.ts |  2 +-
 packages/varlet-ui/src/themes/dark/select.ts      |  2 +-
 packages/varlet-ui/src/themes/dark/table.ts       |  2 +-
 packages/varlet-ui/src/themes/dark/uploader.ts    |  6 +++---
 15 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/packages/varlet-ui/src/icon/example/index.vue b/packages/varlet-ui/src/icon/example/index.vue
index f253b9e58b1..bec0b066dc2 100644
--- a/packages/varlet-ui/src/icon/example/index.vue
+++ b/packages/varlet-ui/src/icon/example/index.vue
@@ -85,7 +85,7 @@ export default {
 
     watchLang(use)
     watchDarkMode(dark, (themes) => {
-      background.value = themes === 'darkThemes' ? '#272727' : '#fff'
+      background.value = themes === 'darkThemes' ? '#303030' : '#fff'
     })
 
     const prevTouchmoveForbid = context.touchmoveForbid
diff --git a/packages/varlet-ui/src/pagination/pagination.less b/packages/varlet-ui/src/pagination/pagination.less
index fd16d7438d1..037bee89891 100644
--- a/packages/varlet-ui/src/pagination/pagination.less
+++ b/packages/varlet-ui/src/pagination/pagination.less
@@ -6,6 +6,7 @@
 @pagination-item-width: 32px;
 @pagination-item-height: 32px;
 @pagination-item-margin: 0 6px;
+@pagination-item-background: #fff;
 @pagination-item-border-radius: 4px;
 @pagination-list-bg-color: #fff;
 @pagination-list-active-bg-color: #edf5ff;
@@ -27,6 +28,7 @@
   --pagination-item-width: @pagination-item-width;
   --pagination-item-height: @pagination-item-height;
   --pagination-item-margin: @pagination-item-margin;
+  --pagination-item-background: @pagination-item-background;
   --pagination-item-border-radius: @pagination-item-border-radius;
   --pagination-list-bg-color: @pagination-list-bg-color;
   --pagination-list-active-bg-color: @pagination-list-active-bg-color;
@@ -65,6 +67,7 @@
     outline: none;
     transition: all 0.25s;
     user-select: none;
+    background: var(--pagination-item-background);
 
     &:hover {
       background-color: var(--pagination-hover-bg-color);
diff --git a/packages/varlet-ui/src/select/Select.vue b/packages/varlet-ui/src/select/Select.vue
index bb228205ac4..1d5c80be7ed 100644
--- a/packages/varlet-ui/src/select/Select.vue
+++ b/packages/varlet-ui/src/select/Select.vue
@@ -76,7 +76,11 @@
           </div>
           <label
             class="var-select__placeholder"
-            :class="[computePlaceholderState(), !hint ? 'var-select--placeholder-non-hint' : null]"
+            :class="[
+              formDisabled || disabled ? 'var-select--disabled' : null,
+              computePlaceholderState(),
+              !hint ? 'var-select--placeholder-non-hint' : null,
+            ]"
           >
             {{ placeholder }}
           </label>
diff --git a/packages/varlet-ui/src/styles/example/index.vue b/packages/varlet-ui/src/styles/example/index.vue
index 2a71a8126a6..35261814ba2 100644
--- a/packages/varlet-ui/src/styles/example/index.vue
+++ b/packages/varlet-ui/src/styles/example/index.vue
@@ -1,18 +1,28 @@
 <template>
   <div class="list">
-    <div class="list__item" :class="`var-elevation--${e}`" v-for="e in elevations" :key="e">
+    <div class="list__item" :class="`var-elevation--${e}`" :style="{ background }" v-for="e in elevations" :key="e">
       {{ e }}
     </div>
   </div>
 </template>
 
 <script>
+import dark from '../../themes/dark'
+import { ref } from 'vue'
+import { watchDarkMode } from '@varlet/cli/site/utils'
+
 export default {
   name: 'RippleExample',
   setup() {
     const elevations = Array.from({ length: 25 }).map((_, index) => index)
+    const background = ref(dark)
+
+    watchDarkMode(dark, (themes) => {
+      background.value = themes === 'darkThemes' ? '#303030' : '#fff'
+    })
 
     return {
+      background,
       elevations,
     }
   },
@@ -35,7 +45,6 @@ export default {
     height: 25vw;
     color: var(--site-config-color-sub-text);
     margin: 2vw;
-    background: var(--site-config-color-sub-bar);
     transition: 0.25s background-color;
   }
 }
diff --git a/packages/varlet-ui/src/themes/dark/button.ts b/packages/varlet-ui/src/themes/dark/button.ts
index 95a4bc0ed86..8154cffa126 100644
--- a/packages/varlet-ui/src/themes/dark/button.ts
+++ b/packages/varlet-ui/src/themes/dark/button.ts
@@ -1,3 +1,3 @@
 export default {
-  '--button-default-color': '#272727',
+  '--button-default-color': '#303030',
 }
diff --git a/packages/varlet-ui/src/themes/dark/card.ts b/packages/varlet-ui/src/themes/dark/card.ts
index 5456f85ea3c..e72decfc88b 100644
--- a/packages/varlet-ui/src/themes/dark/card.ts
+++ b/packages/varlet-ui/src/themes/dark/card.ts
@@ -1,5 +1,5 @@
 export default {
-  '--card-background': '#272727',
+  '--card-background': '#303030',
   '--card-title-color': '#ffffff',
   '--card-subtitle-color': '#aaaaaa',
   '--card-description-color': '#aaaaaa',
diff --git a/packages/varlet-ui/src/themes/dark/collapse.ts b/packages/varlet-ui/src/themes/dark/collapse.ts
index 0d8ac680f34..927af88e088 100644
--- a/packages/varlet-ui/src/themes/dark/collapse.ts
+++ b/packages/varlet-ui/src/themes/dark/collapse.ts
@@ -1,5 +1,5 @@
 export default {
-  '--collapse-background': '#272727',
+  '--collapse-background': '#303030',
   '--collapse-text-color': '#fff',
   '--collapse-border-top': 'thin solid rgba(255, 255, 255, 0.12)',
 }
diff --git a/packages/varlet-ui/src/themes/dark/datePicker.ts b/packages/varlet-ui/src/themes/dark/datePicker.ts
index 97f4e3d4308..aec743636d1 100644
--- a/packages/varlet-ui/src/themes/dark/datePicker.ts
+++ b/packages/varlet-ui/src/themes/dark/datePicker.ts
@@ -1,5 +1,5 @@
 export default {
   '--date-picker-main-color': '#fff',
-  '--date-picker-body-background-color': '#272727',
+  '--date-picker-body-background-color': '#303030',
   '--day-picker-head-item-color': '#aaaaaa',
 }
diff --git a/packages/varlet-ui/src/themes/dark/divider.ts b/packages/varlet-ui/src/themes/dark/divider.ts
index fa37bad4471..1aeccab2bcf 100644
--- a/packages/varlet-ui/src/themes/dark/divider.ts
+++ b/packages/varlet-ui/src/themes/dark/divider.ts
@@ -1,4 +1,4 @@
 export default {
-  '--divider-color': 'rgba(255, 255, 255, 0.12)',
+  '--divider-color': 'rgba(255, 255, 255, 0.2)',
   '--divider-text-color': '#aaa',
 }
diff --git a/packages/varlet-ui/src/themes/dark/index.ts b/packages/varlet-ui/src/themes/dark/index.ts
index 20ac8fea9d7..5596734a5b4 100644
--- a/packages/varlet-ui/src/themes/dark/index.ts
+++ b/packages/varlet-ui/src/themes/dark/index.ts
@@ -35,8 +35,9 @@ export default {
   '--color-success': '#10c48f',
   '--color-warning': '#ff8800',
   '--color-danger': '#ef5350',
-  '--color-disabled': '#393939',
+  '--color-disabled': '#404040',
   '--color-text-disabled': '#757575',
+  // component
   ...button,
   ...cell,
   ...card,
diff --git a/packages/varlet-ui/src/themes/dark/pagination.ts b/packages/varlet-ui/src/themes/dark/pagination.ts
index cd997ea6e0a..dd3d3f1bebb 100644
--- a/packages/varlet-ui/src/themes/dark/pagination.ts
+++ b/packages/varlet-ui/src/themes/dark/pagination.ts
@@ -1,6 +1,7 @@
 export default {
-  '--pagination-list-bg-color': '#272727',
+  '--pagination-list-bg-color': '#303030',
   '--pagination-hover-bg-color': '#25293a',
   '--pagination-list-active-bg-color': '#25293a',
   '--pagination-list-active-color': '#4a7afe',
+  '--pagination-item-background': '#303030',
 }
diff --git a/packages/varlet-ui/src/themes/dark/pullRefresh.ts b/packages/varlet-ui/src/themes/dark/pullRefresh.ts
index af076900542..28b4a3c3bb2 100644
--- a/packages/varlet-ui/src/themes/dark/pullRefresh.ts
+++ b/packages/varlet-ui/src/themes/dark/pullRefresh.ts
@@ -1,3 +1,3 @@
 export default {
-  '--pull-refresh-background': '#272727',
+  '--pull-refresh-background': '#303030',
 }
diff --git a/packages/varlet-ui/src/themes/dark/select.ts b/packages/varlet-ui/src/themes/dark/select.ts
index 0746784625a..1eef2ed9249 100644
--- a/packages/varlet-ui/src/themes/dark/select.ts
+++ b/packages/varlet-ui/src/themes/dark/select.ts
@@ -1,5 +1,5 @@
 export default {
   '--select-select-text-color': '#fff',
   '--select-blur-color': 'rgb(255, 255, 255, .7)',
-  '--select-scroller-background': '#272727',
+  '--select-scroller-background': '#303030',
 }
diff --git a/packages/varlet-ui/src/themes/dark/table.ts b/packages/varlet-ui/src/themes/dark/table.ts
index b534a8471e6..c68acd24f88 100644
--- a/packages/varlet-ui/src/themes/dark/table.ts
+++ b/packages/varlet-ui/src/themes/dark/table.ts
@@ -1,5 +1,5 @@
 export default {
-  '--table-background': '#272727',
+  '--table-background': '#303030',
   '--table-thead-th-text-color': 'rgba(255, 255, 255, 0.6)',
   '--table-tbody-tr-hover-background': '#4c4b4b',
   '--table-thead-border-bottom': 'thin solid rgba(255, 255, 255, 0.12)',
diff --git a/packages/varlet-ui/src/themes/dark/uploader.ts b/packages/varlet-ui/src/themes/dark/uploader.ts
index 8dccac48afd..7a3ad51d9ec 100644
--- a/packages/varlet-ui/src/themes/dark/uploader.ts
+++ b/packages/varlet-ui/src/themes/dark/uploader.ts
@@ -1,7 +1,7 @@
 export default {
-  '--uploader-action-background': '#272727',
+  '--uploader-action-background': '#303030',
   '--uploader-action-icon-color': '#fff',
-  '--uploader-file-name-background': '#272727',
+  '--uploader-file-name-background': '#303030',
   '--uploader-file-name-color': '#aaa',
-  '--uploader-file-cover-background': '#272727',
+  '--uploader-file-cover-background': '#303030',
 }