fix(Guide): fix style error for demo (#3009)

* fix(Guide): fix style error for demo

* fix: fix cr

Author: anlyyao

src/guide/_example/base/index.wxss

@@ -2,29 +2,31 @@
   margin: 32rpx;
   display: inline-block;
 }
+
 .title-major {
   font-size: 48rpx;
   font-weight: 600;
   line-height: 72rpx;
 }
+
 .title-sub {
   font-size: 32rpx;
   font-weight: 400;
   line-height: 48rpx;
   margin-top: 8rpx;
-  color: #0009;
 }
+
 .action {
-  margin: 32px;
+  margin: 64rpx;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 32px;
+  gap: 64rpx;
 }
 
 .slot-body {
   margin-top: 8rpx;
   text-align: left;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 28rpx;
   font-weight: 400;
   line-height: 44rpx;

src/guide/_example/content/index.wxss

@@ -2,23 +2,25 @@
   margin: 32rpx;
   display: inline-block;
 }
+
 .title-major {
   font-size: 48rpx;
   font-weight: 600;
   line-height: 72rpx;
 }
+
 .title-sub {
   font-size: 32rpx;
   font-weight: 400;
   line-height: 48rpx;
   margin-top: 8rpx;
-  color: #0009;
 }
+
 .action {
-  margin: 32px;
+  margin: 64rpx;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 32px;
+  gap: 64rpx;
 }
 
 .content {

src/guide/_example/dialog/index.wxss

@@ -2,33 +2,36 @@
   margin: 32rpx;
   display: inline-block;
 }
+
 .title-major {
   font-size: 48rpx;
   font-weight: 600;
   line-height: 72rpx;
 }
+
 .title-sub {
   font-size: 32rpx;
   font-weight: 400;
   line-height: 48rpx;
   margin-top: 8rpx;
-  color: #0009;
 }
+
 .action {
-  margin: 32px;
+  margin: 64r px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 32px;
+  gap: 64rpx;
 }
 
 .slot-body {
   margin-top: 8rpx;
   text-align: center;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 32rpx;
   font-weight: 400;
   line-height: 48rpx;
 }
+
 .slot-body .guide-demo-image {
   margin-top: 48rpx;
 }

src/guide/_example/multiple/index.wxss

@@ -2,33 +2,36 @@
   margin: 32rpx;
   display: inline-block;
 }
+
 .title-major {
   font-size: 48rpx;
   font-weight: 600;
   line-height: 72rpx;
 }
+
 .title-sub {
   font-size: 32rpx;
   font-weight: 400;
   line-height: 48rpx;
   margin-top: 8rpx;
-  color: #0009;
 }
+
 .action {
-  margin: 32px;
+  margin: 63rpx;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 32px;
+  gap: 63rpx;
 }
 
 .slot-body {
   margin-top: 8rpx;
   text-align: center;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 32rpx;
   font-weight: 400;
   line-height: 48rpx;
 }
+
 .slot-body .guide-demo-image {
   margin-top: 48rpx;
 }

src/guide/_example/no-mask/index.wxss

@@ -2,21 +2,23 @@
   margin: 32rpx;
   display: inline-block;
 }
+
 .title-major {
   font-size: 48rpx;
   font-weight: 600;
   line-height: 72rpx;
 }
+
 .title-sub {
   font-size: 32rpx;
   font-weight: 400;
   line-height: 48rpx;
   margin-top: 8rpx;
-  color: #0009;
 }
+
 .action {
-  margin: 32px;
+  margin: 64rpx;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 32px;
+  gap: 64rpx;
 }

src/guide/guide.less

@@ -1,6 +1,6 @@
 @import '../common/style/index.less';
 
-@guide-reference-mask-color: var(--td-guide-reference-mask-color, @text-color-secondary);
+@guide-reference-mask-color: var(--td-guide-reference-mask-color, @font-gray-2);
 @guide-reference-border-radius: var(--td-guide-reference-border-radius, @radius-default);
 @guide-reference-border: var(--td-guide-reference-border, 4rpx solid @brand-color);