From c022b6cb94eb755a0cab82f81f28e151ad3fc6b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Sun, 24 Apr 2022 00:56:03 +0800
Subject: [PATCH] docs: fix some spacing styles (#7343)

---
 docs/.vitepress/vitepress/components/demo/vp-example.vue | 2 +-
 docs/.vitepress/vitepress/components/vp-demo.vue         | 4 ++--
 docs/en-US/component/color.md                            | 8 ++++++--
 packages/theme-chalk/src/date-picker/year-table.scss     | 4 ++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/vitepress/components/demo/vp-example.vue b/docs/.vitepress/vitepress/components/demo/vp-example.vue
index c31311bfa4..8c15064877 100644
--- a/docs/.vitepress/vitepress/components/demo/vp-example.vue
+++ b/docs/.vitepress/vitepress/components/demo/vp-example.vue
@@ -21,7 +21,7 @@ defineProps({
 
 <style lang="scss" scoped>
 .example-showcase {
-  padding: 0.8rem;
+  padding: 1.5rem;
   margin: 0.5px;
   background-color: var(--bg-color);
 }
diff --git a/docs/.vitepress/vitepress/components/vp-demo.vue b/docs/.vitepress/vitepress/components/vp-demo.vue
index 826eed6388..37bb0635c2 100644
--- a/docs/.vitepress/vitepress/components/vp-demo.vue
+++ b/docs/.vitepress/vitepress/components/vp-demo.vue
@@ -131,11 +131,11 @@ const copyCode = async () => {
   border-radius: var(--el-border-radius-base);
 
   .op-btns {
-    padding: 0.3rem;
+    padding: 0.5rem;
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    height: 2rem;
+    height: 2.5rem;
 
     .el-icon {
       &:hover {
diff --git a/docs/en-US/component/color.md b/docs/en-US/component/color.md
index ec896a957f..266f8bcf91 100644
--- a/docs/en-US/component/color.md
+++ b/docs/en-US/component/color.md
@@ -12,8 +12,8 @@ Element Plus uses a specific set of palettes to specify colors to provide a cons
   position: relative;
   border-radius: 4px;
   padding: 20px;
-  margin: 5px 0;
-  height: 114px;
+  margin: 8px 0;
+  height: 100px;
   box-sizing: border-box;
   color: var(--el-color-white);
   font-size: 14px;
@@ -42,6 +42,10 @@ Element Plus uses a specific set of palettes to specify colors to provide a cons
       }
     }
   }
+
+  .value {
+    margin-top: 2px;
+  }
 }
 
 .demo-color-box-lite {
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index 84054436e9..43a7c94915 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -7,7 +7,7 @@
   border-collapse: collapse;
 
   .#{$namespace}-icon {
-    color: var(--el-datepicker-icon-color);
+    color: getCssVar('datepicker', 'icon-color');
   }
 
   td {
@@ -17,7 +17,7 @@
 
     &.today {
       .cell {
-        color: var(--el-color-primary);
+        color: getCssVar('color', 'primary');
         font-weight: bold;
       }
     }