chore: fix example css vars (#4101)

* chore: fix example css vars

* chore: remove file

* chore: fix  cr

* chore: update class

* chore: fix doc

* chore: update snap

* fix: fix cr

---------

Co-authored-by: anlyyao <[email protected]>

Author: liweijie0812

packages/components/avatar/README.en-US.md

@@ -79,7 +79,7 @@ t-class-image | \-
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | -
+--td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
 --td-avatar-group-line-spacing | 4rpx | -
 --td-avatar-group-margin-left-large | -16rpx | -
 --td-avatar-group-margin-left-medium | -16rpx | -

packages/components/avatar/README.md

@@ -139,7 +139,7 @@ t-class-image | 图片样式类
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | -
+--td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
 --td-avatar-group-line-spacing | 4rpx | -
 --td-avatar-group-margin-left-large | -16rpx | -
 --td-avatar-group-margin-left-medium | -16rpx | -

packages/components/grid/_example/icon-grid/index.wxss

@@ -4,8 +4,6 @@
 }
 
 .grid-item__image {
-  --td-button-medium-icon-font-size: 48rpx;
-
   height: 100%;
   display: flex;
   align-items: center;

packages/components/loading/__test__/__snapshots__/demo.test.js.snap

@@ -97,7 +97,7 @@ exports[`Loading Loading size demo works fine 1`] = `
       中尺寸
     </wx-view>
     <t-loading
-      class="middle"
+      class="medium"
       size="56rpx"
       text="加载中..."
       theme="circular"

packages/components/loading/_example/size/index.wxml

@@ -3,7 +3,7 @@
 
   <view class="demo-desc">中尺寸</view>
 
-  <t-loading theme="{{ skylineRender ? 'spinner' : 'circular'}}" size="56rpx" text="加载中..." class="middle" />
+  <t-loading theme="{{ skylineRender ? 'spinner' : 'circular'}}" size="56rpx" text="加载中..." class="medium" />
 
   <view class="demo-desc">小尺寸</view>
 

packages/components/loading/_example/size/index.wxss

@@ -1,9 +1,9 @@
 .large {
-  --td-loading-text-font-size: 32rpx;
+  --td-loading-text-font: var(--td-font-body-large);
 }
 
-.middle {
-  --td-loading-text-font-size: 28rpx;
+.medium {
+  --td-loading-text-font: var(--td-font-body-medium);
 }
 
 .loading-size-demo .demo-desc {

packages/components/navbar/_example/search/index.wxss

@@ -1,8 +1,6 @@
 .search-box {
   --td-search-height: 32px;
+  --td-search-font: var(--td-font-body-medium);
+  --td-search-icon-size: 40rpx;
   width: 252px;
 }
-
-page {
-  --td-search-font-size: 18px;
-}

packages/components/side-bar/_example/base/index.wxss

@@ -10,7 +10,7 @@ page .round-image {
   display: flex;
   height: 100vh;
 
-  --td-grid-item-text-font-size: 24rpx;
+  --td-grid-item-text-font: var(--td-font-body-small);
 }
 
 .side-bar-wrapper .content {

packages/components/side-bar/_example/custom/index.wxss

@@ -10,7 +10,7 @@ page .round-image {
   display: flex;
   height: 100vh;
 
-  --td-grid-item-text-font-size: 24rpx;
+  --td-grid-item-text-font: var(--td-font-body-small);
 }
 
 .side-bar-wrapper .content {

packages/components/side-bar/_example/switch/index.wxss

@@ -10,8 +10,6 @@ page .round-image {
   display: flex;
   height: 100vh;
   overflow: hidden;
-
-  --td-grid-item-text-font-size: 24rpx;
 }
 
 .side-bar-wrapper .content {
@@ -28,8 +26,7 @@ page .round-image {
 .side-bar-wrapper .title {
   padding-left: 40rpx;
   margin-bottom: 8rpx;
-  font-size: 28rpx;
-  line-height: 44rpx;
+  font: var(--td-font-body-medium);
   color: var(--td-text-color-primary);
 }