chore: demo using css vars (#9265)

src/action-sheet/demo/index.vue

@@ -124,11 +124,10 @@ const onCancel = () => Toast(t('cancel'));
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-action-sheet {
   &-content {
-    padding: @padding-md @padding-md @padding-md * 10;
+    padding: var(--van-padding-md) var(--van-padding-md)
+      calc(var(--van-padding-md) * 10);
   }
 }
 </style>

src/badge/demo/index.vue

@@ -87,19 +87,17 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-badge {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-badge__wrapper {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .child {
     width: 40px;
     height: 40px;
-    background: @gray-2;
+    background: var(--van-gray-2);
     border-radius: 4px;
   }
 

src/button/demo/index.vue

@@ -140,24 +140,22 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-button {
-  background: @white;
+  background: var(--van-white);
 
   .van-button {
     &--large {
-      margin-bottom: @padding-md;
+      margin-bottom: var(--van-padding-md);
     }
 
     &--small,
     &--normal:not(:last-child) {
-      margin-right: @padding-md;
+      margin-right: var(--van-padding-md);
     }
   }
 
   .van-doc-demo-block {
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
   }
 
   .van-doc-demo-block__title {
@@ -165,7 +163,7 @@ const t = useTranslate(i18n);
   }
 
   &-row {
-    margin-bottom: @padding-sm;
+    margin-bottom: var(--van-padding-sm);
   }
 }
 </style>

src/card/demo/index.vue

@@ -72,9 +72,7 @@ const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-card {
-  background-color: @white;
+  background-color: var(--van-white);
 }
 </style>

src/checkbox/demo/index.vue

@@ -179,10 +179,8 @@ const toggleAll = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-checkbox {
-  background: @white;
+  background: var(--van-white);
 
   .van-checkbox {
     margin: 0 0 8px 20px;
@@ -199,10 +197,10 @@ const toggleAll = () => {
   }
 
   &-buttons {
-    margin-top: @padding-md;
+    margin-top: var(--van-padding-md);
 
     .van-button {
-      margin-left: @padding-md;
+      margin-left: var(--van-padding-md);
     }
   }
 

src/circle/demo/index.vue

@@ -116,18 +116,16 @@ const reduce = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-circle {
   .van-circle {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .van-button {
-    margin: @padding-md 0 0 10px;
+    margin: var(--van-padding-md) 0 0 10px;
 
     &:first-of-type {
-      margin-left: @padding-md;
+      margin-left: var(--van-padding-md);
     }
   }
 }

src/col/demo/index.vue

@@ -69,13 +69,11 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-col {
-  background: @white;
+  background: var(--van-white);
 
   .van-doc-demo-block {
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
   }
 
   .van-doc-demo-block__title {
@@ -84,7 +82,7 @@ const t = useTranslate(i18n);
 
   .van-col {
     margin-bottom: 10px;
-    color: @white;
+    color: var(--van-white);
     font-size: 13px;
     line-height: 30px;
     text-align: center;

src/collapse/demo/index.vue

@@ -87,12 +87,10 @@ const state = reactive({
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-collapse {
   .van-icon-question-o {
     margin-left: 5px;
-    color: @blue;
+    color: var(--van-blue);
     font-size: 15px;
     vertical-align: -3px;
   }

src/config-provider/demo/index.vue

@@ -88,12 +88,10 @@ const themeVars = {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-collapse {
   .van-icon-question-o {
     margin-left: 5px;
-    color: @blue;
+    color: var(--van-blue);
     font-size: 15px;
     vertical-align: -3px;
   }

src/contact-list/demo/index.vue

@@ -72,12 +72,10 @@ const onSelect = (contact: { id: string }) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-contact-card {
   .van-popup {
     height: 100%;
-    background-color: @background-color;
+    background-color: var(--van-background-color);
   }
 }
 </style>

src/count-down/demo/index.vue

@@ -88,19 +88,17 @@ const onFinish = () => Toast(t('finished'));
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-count-down {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-count-down {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .colon {
     display: inline-block;
     margin: 0 4px;
-    color: @red;
+    color: var(--van-red);
   }
 
   .block {
@@ -109,7 +107,7 @@ const onFinish = () => Toast(t('finished'));
     color: #fff;
     font-size: 12px;
     text-align: center;
-    background-color: @red;
+    background-color: var(--van-red);
     border-radius: 4px;
   }
 

src/dialog/demo/index.vue

@@ -109,8 +109,6 @@ const onClickBeforeClose = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-dialog {
   img {
     box-sizing: border-box;

src/divider/demo/index.vue

@@ -58,13 +58,11 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-divider {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-doc-demo-block__title {
-    padding-top: @padding-md;
+    padding-top: var(--van-padding-md);
   }
 }
 </style>

src/empty/demo/index.vue

@@ -64,10 +64,8 @@ const active = ref('error');
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-empty {
-  background: @white;
+  background: var(--van-white);
 
   .custom-image {
     .van-empty__image {

src/icon/demo/index.vue

@@ -183,8 +183,6 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-icon {
   font-size: 0;
 
@@ -210,19 +208,19 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
       height: 36px;
       margin: -4px 0 4px;
       padding: 0 5px;
-      color: @gray-7;
+      color: var(--van-gray-7);
       font-size: 12px;
       line-height: 18px;
     }
 
     &:active {
-      background-color: @active-color;
+      background-color: var(--van-active-color);
     }
   }
 
   .van-icon {
     margin: 16px 0 16px;
-    color: @text-color;
+    color: var(--van-text-color);
     font-size: 32px;
   }
 

src/image/demo/index.vue

@@ -88,14 +88,12 @@ const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-image {
   overflow-x: hidden;
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-row {
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
   }
 
   .van-col {
@@ -104,7 +102,7 @@ const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
 
   .text {
     margin-top: 5px;
-    color: @gray-7;
+    color: var(--van-gray-7);
     font-size: 14px;
     text-align: center;
   }

src/lazyload/demo/index.vue

@@ -51,19 +51,17 @@ const componentImageList = [
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-lazyload {
-  padding-right: @padding-md;
-  padding-left: @padding-md;
+  padding-right: var(--van-padding-md);
+  padding-left: var(--van-padding-md);
 
   img,
   div[lazy] {
     box-sizing: border-box;
     width: 100%;
     height: 250px;
-    margin-bottom: @padding-md;
-    padding: @padding-md;
+    margin-bottom: var(--van-padding-md);
+    padding: var(--van-padding-md);
     background-color: white;
     background-repeat: no-repeat;
     background-size: 100% 100%;

src/list/demo/index.vue

@@ -120,8 +120,6 @@ const onRefresh = (index: number) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-list {
   .van-cell {
     text-align: center;
@@ -130,7 +128,7 @@ const onRefresh = (index: number) => {
   .page-desc {
     margin: 0;
     padding: 5px 0;
-    color: @gray-7;
+    color: var(--van-gray-7);
     font-size: 14px;
     text-align: center;
 
@@ -144,7 +142,7 @@ const onRefresh = (index: number) => {
   }
 
   .van-checkbox__label {
-    color: @gray-7;
+    color: var(--van-gray-7);
   }
 }
 </style>

src/loading/demo/index.vue

@@ -62,10 +62,8 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-loading {
-  background: @white;
+  background: var(--van-white);
 
   .van-loading {
     display: inline-block;

src/notice-bar/demo/index.vue

@@ -72,10 +72,8 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-notice-bar {
-  background: @white;
+  background: var(--van-white);
 
   .van-notice-bar:not(:first-of-type) {
     margin-top: 4px;

src/number-keyboard/demo/index.vue

@@ -153,13 +153,11 @@ const isTest = process.env.NODE_ENV === 'test';
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-number-keyboard {
   padding-bottom: 300px;
 
   .van-button {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>

src/overlay/demo/index.vue

@@ -45,10 +45,8 @@ const showEmbedded = ref(false);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-overlay {
-  background: @white;
+  background: var(--van-white);
 
   .wrapper {
     display: flex;
@@ -60,7 +58,7 @@ const showEmbedded = ref(false);
   .block {
     width: 120px;
     height: 120px;
-    background-color: @white;
+    background-color: var(--van-white);
     border-radius: 4px;
   }
 }

src/pagination/demo/index.vue

@@ -77,8 +77,6 @@ const currentPage4 = ref(1);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-pagination {
   .van-pagination {
     width: 100%;
@@ -86,7 +84,7 @@ const currentPage4 = ref(1);
   }
 
   .van-doc-demo-block {
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
   }
 
   .van-doc-demo-block__title {

src/popover/demo/index.vue

@@ -211,18 +211,16 @@ const onSelect = (action: { text: string }) => Toast(action.text);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-popover {
   &-refer {
     width: 60px;
     height: 60px;
-    background-color: @blue;
+    background-color: var(--van-blue);
     border-radius: 8px;
   }
 
   .van-popover__wrapper {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .van-field {

src/popup/demo/index.vue

@@ -140,15 +140,13 @@ const showCustomIconPosition = ref(false);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-popup {
   .van-row {
-    margin-bottom: @padding-md;
+    margin-bottom: var(--van-padding-md);
   }
 
   .van-button {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>

src/progress/demo/index.vue

@@ -43,10 +43,8 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-progress {
-  background: @white;
+  background: var(--van-white);
 
   .van-progress {
     margin: 20px;

src/pull-refresh/demo/index.vue

@@ -97,10 +97,8 @@ onMounted(preloadImage);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-pull-refresh {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-pull-refresh {
     height: calc(100vh - 50px);
@@ -115,7 +113,7 @@ onMounted(preloadImage);
 
   p {
     margin: 0;
-    padding: @padding-md 0 0 @padding-md;
+    padding: var(--van-padding-md) 0 0 var(--van-padding-md);
   }
 }
 </style>

src/radio/demo/index.vue

@@ -137,10 +137,8 @@ const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-radio {
-  background: @white;
+  background: var(--van-white);
 
   &-group {
     padding: 0 16px;

src/rate/demo/index.vue

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

src/sidebar/demo/index.vue

@@ -67,18 +67,16 @@ const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-sidebar {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-sidebar {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   &-title {
     margin-bottom: 16px;
-    color: @gray-6;
+    color: var(--van-gray-6);
     font-weight: normal;
     font-size: 14px;
   }

src/skeleton/demo/index.vue

@@ -46,18 +46,16 @@ const show = ref(false);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-skeleton {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-switch {
-    margin: 0 @padding-md @padding-xs;
+    margin: 0 var(--van-padding-md) var(--van-padding-xs);
   }
 
   .demo-preview {
     display: flex;
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
 
     .demo-content {
       padding-top: 6px;
@@ -79,7 +77,7 @@ const show = ref(false);
       flex-shrink: 0;
       width: 32px;
       height: 32px;
-      margin-right: @padding-md;
+      margin-right: var(--van-padding-md);
     }
   }
 }

src/slider/demo/index.vue

@@ -95,14 +95,12 @@ const onChange = (value: string) => Toast(t('text') + value);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-slider {
-  background: @white;
+  background: var(--van-white);
   user-select: none;
 
   .van-doc-demo-block {
-    padding: 0 @padding-md 20px;
+    padding: 0 var(--van-padding-md) 20px;
   }
 
   .van-doc-demo-block__title {
@@ -115,7 +113,7 @@ const onChange = (value: string) => Toast(t('text') + value);
     font-size: 10px;
     line-height: 18px;
     text-align: center;
-    background-color: @red;
+    background-color: var(--van-red);
     border-radius: 100px;
   }
 }

src/steps/demo/index.vue

@@ -84,16 +84,14 @@ const nextStep = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-steps {
   .steps-success,
   .van-icon-location {
-    color: @green;
+    color: var(--van-green);
   }
 
   .van-button {
-    margin: @padding-md 0 0 @padding-md;
+    margin: var(--van-padding-md) 0 0 var(--van-padding-md);
   }
 
   p,

src/sticky/demo/index.vue

@@ -57,13 +57,11 @@ const container = ref(null);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-sticky {
   height: 200vh;
 
   .van-button {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>

src/style/demo/index.vue

@@ -62,24 +62,22 @@ const animate = (newName: string) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-style {
   .van-ellipsis,
   .van-multi-ellipsis--l2 {
     max-width: 300px;
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
     font-size: 14px;
     line-height: 18px;
   }
 
   .van-ellipsis {
-    margin-bottom: @padding-md;
+    margin-bottom: var(--van-padding-md);
   }
 
   .van-hairline--top {
     height: 30px;
-    background-color: @white;
+    background-color: var(--van-white);
 
     &::after {
       top: 5px;
@@ -93,7 +91,7 @@ const animate = (newName: string) => {
     width: 100px;
     height: 100px;
     margin: -50px 0 0 -50px;
-    background-color: @blue;
+    background-color: var(--van-blue);
     border-radius: 8px;
   }
 }

src/submit-bar/demo/index.vue

@@ -75,8 +75,6 @@ const onClickLink = () => Toast(t('clickLink'));
 Ï
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-submit-bar {
   .van-submit-bar {
     position: relative;
@@ -84,11 +82,11 @@ const onClickLink = () => Toast(t('clickLink'));
   }
 
   .edit-address {
-    color: @blue;
+    color: var(--van-blue);
   }
 
   .van-checkbox {
-    margin-right: @padding-sm;
+    margin-right: var(--van-padding-sm);
   }
 }
 </style>

src/swipe-cell/demo/index.vue

@@ -92,14 +92,12 @@ const beforeClose = ({ position }: { position: string }) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-swipe-cell {
   user-select: none;
 
   .van-card {
     margin: 0;
-    background-color: @white;
+    background-color: var(--van-white);
   }
 
   .delete-button {

src/swipe/demo/index.vue

@@ -97,14 +97,12 @@ const onChange = (index: number) => Toast(t('message') + index);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-swipe {
   padding-bottom: 30px;
 
   .van-swipe {
     &-item {
-      color: @white;
+      color: var(--van-white);
       font-size: 20px;
       line-height: 150px;
       text-align: center;
@@ -124,7 +122,7 @@ const onChange = (index: number) => Toast(t('message') + index);
       width: 100%;
       height: 240px;
       padding: 30px 60px;
-      background-color: @white;
+      background-color: var(--van-white);
       pointer-events: none;
     }
   }
@@ -140,7 +138,7 @@ const onChange = (index: number) => Toast(t('message') + index);
     right: 5px;
     bottom: 5px;
     padding: 2px 5px;
-    color: @white;
+    color: var(--van-white);
     font-size: 12px;
     background: rgba(0, 0, 0, 0.1);
   }

src/switch/demo/index.vue

@@ -80,11 +80,9 @@ const onUpdateValue = (checked: boolean) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-switch {
   .van-switch {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>

src/tab/demo/index.vue

@@ -162,8 +162,6 @@ const beforeChange = (name: number) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-tab {
   margin-bottom: 80vh;
 
@@ -174,7 +172,7 @@ const beforeChange = (name: number) => {
 
   .van-tab__pane {
     padding: 24px 20px;
-    background-color: @white;
+    background-color: var(--van-white);
   }
 
   .van-tabs--card .van-tab__pane {

src/tag/demo/index.vue

@@ -136,11 +136,9 @@ const close = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-tag {
   .van-tag + .van-tag {
-    margin-left: @padding-xs;
+    margin-left: var(--van-padding-xs);
   }
 }
 </style>

src/uploader/demo/index.vue

@@ -179,13 +179,11 @@ const onOversize = (file: UploaderFileListItem, detail: unknown) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-uploader {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-uploader {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .preview-cover {