fix(picker): optimize dark mode

varletjs · Nov 17, 2021 · c7304b3 · c7304b3
1 parent 2d404d7
commit c7304b3
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/packages/varlet-ui/src/picker/docs/en-US.md b/packages/varlet-ui/src/picker/docs/en-US.md
@@ -219,7 +219,7 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--picker-toolbar-height` | `44px` |
 | `--picker-confirm-button-text-color` | `var(--color-primary)` |
 | `--picker-cancel-button-text-color` | `#888` |
-| `--picker-picked-border` | `1px solid #eee` |
+| `--picker-picked-border` | `1px solid rgba(0, 0, 0, 0.12)` |
 | `--picker-title-font-size` | `16px` |
 | `--picker-toolbar-padding` | `0 4px` |
 | `--picker-mask-background-image` | `linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4))` |
diff --git a/packages/varlet-ui/src/picker/docs/zh-CN.md b/packages/varlet-ui/src/picker/docs/zh-CN.md
@@ -219,7 +219,7 @@ export default {
 | `--picker-toolbar-height` | `44px` |
 | `--picker-confirm-button-text-color` | `var(--color-primary)` |
 | `--picker-cancel-button-text-color` | `#888` |
-| `--picker-picked-border` | `1px solid #eee` |
+| `--picker-picked-border` | `1px solid rgba(0, 0, 0, 0.12)` |
 | `--picker-title-font-size` | `16px` |
 | `--picker-toolbar-padding` | `0 4px` |
 | `--picker-mask-background-image` | `linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4))` |
diff --git a/packages/varlet-ui/src/picker/picker.less b/packages/varlet-ui/src/picker/picker.less
@@ -2,7 +2,7 @@
 @picker-toolbar-height: 44px;
 @picker-confirm-button-text-color: var(--color-primary);
 @picker-cancel-button-text-color: #888;
-@picker-picked-border: 1px solid #eee;
+@picker-picked-border: 1px solid rgba(0, 0, 0, 0.12);
 @picker-title-font-size: 16px;
 @picker-toolbar-padding: 0 4px;
 @picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),
@@ -23,6 +23,7 @@
   width: 100%;
   background: var(--picker-background);
   user-select: none;
+  transition: 0.25s background-color;
 
   &__popup[var-picker-cover] {
     width: 100%;
@@ -67,6 +68,7 @@
     left: 0;
     border-top: var(--picker-picked-border);
     border-bottom: var(--picker-picked-border);
+    transition: 0.25s border;
   }
 
   &__mask {
@@ -76,9 +78,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: var(--picker-mask-background-image);
-    background-repeat: no-repeat;
-    background-position: top, bottom;
   }
 
   &__toolbar {

diff --git a/packages/varlet-ui/src/themes/dark/picker.ts b/packages/varlet-ui/src/themes/dark/picker.ts
@@ -1,4 +1,6 @@
 export default {
   '--picker-background': '#272727',
+  '--picker-cancel-button-text-color': '#aaa',
+  '--picker-picked-border': '1px solid rgba(255, 255, 255, 0.12)',
   '--picker-mask-background-image': `linear-gradient(180deg, hsl(0deg 0% 15%), hsl(0deg 7% 14% / 40%)), linear-gradient(0deg, hsl(0deg 0% 15%), hsl(0deg 7% 14% / 40%))`,
 }