style(Picker): add --van-picker-mask-color css var (#9783)

packages/vant/docs/site/use-translate.ts

@@ -31,11 +31,7 @@ export function initDemoLocale() {
   Locale.add({
     'zh-CN': {
       add: '增加',
-      decrease: '减少',
       red: '红色',
-      orange: '橙色',
-      yellow: '黄色',
-      purple: '紫色',
       tab: '标签',
       tag: '标签',
       desc: '描述信息',
@@ -45,25 +41,23 @@ export function initDemoLocale() {
       button: '按钮',
       option: '选项',
       search: '搜索',
-      content: '内容',
+      orange: '橙色',
+      yellow: '黄色',
+      purple: '紫色',
       custom: '自定义',
+      content: '内容',
       username: '用户名',
       password: '密码',
+      decrease: '减少',
       disabled: '禁用状态',
       uneditable: '不可编辑',
       basicUsage: '基础用法',
       advancedUsage: '高级用法',
       loadingStatus: '加载状态',
-      usernamePlaceholder: '请输入用户名',
-      passwordPlaceholder: '请输入密码',
     },
     'en-US': {
       add: 'Add',
-      decrease: 'Decrease',
       red: 'Red',
-      orange: 'Orange',
-      yellow: 'Yellow',
-      purple: 'Purple',
       tab: 'Tab',
       tag: 'Tag',
       desc: 'Description',
@@ -73,17 +67,19 @@ export function initDemoLocale() {
       button: 'Button',
       option: 'Option',
       search: 'Search',
-      content: 'Content',
+      orange: 'Orange',
+      yellow: 'Yellow',
+      purple: 'Purple',
       custom: 'Custom',
+      content: 'Content',
       username: 'Username',
       password: 'Password',
-      loadingStatus: 'Loading',
+      decrease: 'Decrease',
       disabled: 'Disabled',
       uneditable: 'Uneditable',
       basicUsage: 'Basic Usage',
       advancedUsage: 'Advanced Usage',
-      usernamePlaceholder: 'Username',
-      passwordPlaceholder: 'Password',
+      loadingStatus: 'Loading',
     },
   });
 }

packages/vant/src/field/demo/CustomType.vue

@@ -16,6 +16,7 @@ const t = useTranslate({
     digitPlaceholder: '请输入整数',
     phonePlaceholder: '请输入手机号',
     numberPlaceholder: '请输入数字（支持小数）',
+    passwordPlaceholder: '请输入密码',
   },
   'en-US': {
     text: 'Text',
@@ -28,6 +29,7 @@ const t = useTranslate({
     digitPlaceholder: 'Digit',
     phonePlaceholder: 'Phone',
     numberPlaceholder: 'Number',
+    passwordPlaceholder: 'Password',
   },
 });
 

packages/vant/src/field/demo/ErrorInfo.vue

@@ -10,12 +10,14 @@ const t = useTranslate({
     errorInfo: '错误提示',
     phoneError: '手机号格式错误',
     phonePlaceholder: '请输入手机号',
+    usernamePlaceholder: '请输入用户名',
   },
   'en-US': {
     phone: 'Phone',
     errorInfo: 'Error Info',
     phoneError: 'Invalid phone',
     phonePlaceholder: 'Phone',
+    usernamePlaceholder: 'Username',
   },
 });
 

packages/vant/src/picker/README.md

@@ -425,7 +425,8 @@ The component provides the following CSS variables, which can be used to customi
 | --van-picker-cancel-action-color | _var(--van-text-color-secondary)_ | - |
 | --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
 | --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
-| --van-picker-option-text-color | _var(--van-black)_ | - |
+| --van-picker-option-text-color | _var(--van-text-color)_ | - |
 | --van-picker-option-disabled-opacity | _0.3_ | - |
+| --van-picker-mask-color | _linear-gradient_ | - |
 | --van-picker-loading-icon-color | _var(--van-primary-color)_ | - |
 | --van-picker-loading-mask-color | _rgba(255, 255, 255, 0.9)_ | - |

packages/vant/src/picker/README.zh-CN.md

@@ -450,8 +450,9 @@ pickerRef.value?.confirm();
 | --van-picker-cancel-action-color | _var(--van-text-color-secondary)_ | - |
 | --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
 | --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
-| --van-picker-option-text-color | _var(--van-black)_ | - |
+| --van-picker-option-text-color | _var(--van-text-color)_ | - |
 | --van-picker-option-disabled-opacity | _0.3_ | - |
+| --van-picker-mask-color | _linear-gradient_ | - |
 | --van-picker-loading-icon-color | _var(--van-primary-color)_ | - |
 | --van-picker-loading-mask-color | _rgba(255, 255, 255, 0.9)_ | - |
 

packages/vant/src/picker/index.less

@@ -15,6 +15,7 @@
   --van-picker-option-disabled-opacity: @picker-option-disabled-opacity;
   --van-picker-loading-icon-color: @picker-loading-icon-color;
   --van-picker-loading-mask-color: @picker-loading-mask-color;
+  --van-picker-mask-color: @picker-mask-color;
 }
 
 .van-picker {
@@ -92,12 +93,7 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    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));
+    background-image: var(--van-picker-mask-color);
     background-repeat: no-repeat;
     background-position: top, bottom;
     // fix rendering failure during animation on safari

packages/vant/src/picker/var.less

@@ -10,7 +10,13 @@
 @picker-cancel-action-color: var(--van-text-color-secondary);
 @picker-option-padding: 0 var(--van-padding-base);
 @picker-option-font-size: var(--van-font-size-lg);
-@picker-option-text-color: var(--van-black);
+@picker-option-text-color: var(--van-text-color);
 @picker-option-disabled-opacity: 0.3;
+@picker-mask-color: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.4)
+  ),
+  linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
 @picker-loading-icon-color: var(--van-primary-color);
 @picker-loading-mask-color: rgba(255, 255, 255, 0.9);