chore: adjust some css vars (#9758)

packages/vant/src/badge/index.less

@@ -25,7 +25,7 @@
   line-height: 1.2;
   text-align: center;
   background: var(--van-badge-background-color);
-  border: var(--van-badge-border-width) solid var(--van-white);
+  border: var(--van-badge-border-width) solid var(--van-background-color-light);
   border-radius: var(--van-border-radius-max);
 
   &--fixed {

packages/vant/src/checkbox/demo/index.vue

@@ -184,7 +184,7 @@ const toggleAll = () => {
 
 <style lang="less">
 .demo-checkbox {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   .van-checkbox {
     margin: 0 0 8px 20px;

packages/vant/src/icon/demo/index.vue

@@ -231,7 +231,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
   .van-tab__pane {
     width: auto;
     margin: 20px;
-    background-color: #fff;
+    background-color: var(--van-background-color-light);
     border-radius: 12px;
   }
 }

packages/vant/src/popover/demo/index.vue

@@ -136,7 +136,7 @@ const onSelect = (action: { text: string }) => Toast(action.text);
       v-model:show="showPicker"
       round
       position="bottom"
-      get-container="body"
+      teleport="body"
     >
       <div class="demo-popover-box">
         <van-popover

packages/vant/src/popover/test/__snapshots__/demo.spec.ts.snap

@@ -47,10 +47,6 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
-  </transition-stub>
-  <transition-stub>
-  </transition-stub>
 </div>
 <div>
   <span class="van-popover__wrapper">

packages/vant/src/rate/demo/index.vue

@@ -88,7 +88,7 @@ const onChange = (value: number) => Toast(t('toastContent', value));
 <style lang="less">
 .demo-rate {
   padding-bottom: 20px;
-  background-color: #fff;
+  background-color: var(--van-background-color-light);
 
   .van-rate {
     margin-left: var(--van-padding-md);

packages/vant/src/step/index.less

@@ -66,7 +66,7 @@
       left: calc(var(--van-padding-xs) * -1);
       z-index: 1;
       padding: 0 var(--van-padding-xs);
-      background-color: var(--van-white);
+      background-color: var(--van-background-color-light);
       transform: translateY(-50%);
     }
 

packages/vant/src/sticky/demo/index.vue

@@ -38,7 +38,10 @@ const container = ref(null);
   </demo-block>
 
   <demo-block :title="t('setContainer')">
-    <div ref="container" style="height: 150px; background-color: #fff">
+    <div
+      ref="container"
+      style="height: 150px; background-color: var(--van-background-color-light)"
+    >
       <van-sticky :container="container">
         <van-button type="warning" style="margin-left: 215px">
           {{ t('setContainer') }}

packages/vant/src/sticky/test/__snapshots__/demo.spec.ts.snap

@@ -34,7 +34,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div style="height: 150px; background-color: rgb(255, 255, 255);">
+  <div style="height: 150px;">
     <div>
       <div class="van-sticky">
         <button type="button"