fix(ui/select, darkmode): fix select disabled color lose, fix darkmod…

…e color

affects: @varlet/ui

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

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);

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>

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;
   }
 }

packages/varlet-ui/src/themes/dark/button.ts

@@ -1,3 +1,3 @@
 export default {
-  '--button-default-color': '#272727',
+  '--button-default-color': '#303030',
 }

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',

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)',
 }

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',
 }

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',
 }

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,

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',
 }

packages/varlet-ui/src/themes/dark/pullRefresh.ts

@@ -1,3 +1,3 @@
 export default {
-  '--pull-refresh-background': '#272727',
+  '--pull-refresh-background': '#303030',
 }

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',
 }

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)',

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',
 }