feat(theme-chalk): css var for empty & rate (#5359)

* 更新var.scss，提取empty的fill-color 将fill的color提取出来，作为变量，方便后续修改，修改如下： 'fill-color-0': var(--el-color-white), 'fill-color-1': #FCFCFD, 'fill-color-2': #F8F9FB, 'fill-color-3': #F7F8FC, 'fill-color-4': #EEEFF3, 'fill-color-5': #EDEEF2, 'fill-color-6': #E9EBEF, 'fill-color-7': #E5E7E9, 'fill-color-8': #E0E3E9, 'fill-color-9': #D5D7DE, * 修改Empty的fillcolor作为变量引用，方便后续的色彩搭配更改修改Empty的fillcolor作为变量引用，方便后续的色彩搭配更改 * 修改rate下的配色提取到变量里修改rate下的配色提取到变量里，提取如下： 'void-color': #c6d1de, 'rate-color': #F7BA2A, * 提取rate的色彩作为变量提取rate的色彩作为变量 * 修改rate的色彩变量修改和提取rate变量为： 'void-color': #c6d1de, 'star-color': #F7BA2A, 'disable-void-color': #EFF2F7, 'text-color': #1f2d3d, * replace space to enter 替換空格为回车 * lint change lint change * Missing Pretty error color 颜色小写 * Add CustomStyles infomation Add CustomStyles infomation * Change CustomStyles Change CustomStyles * Add CustomStyles Add CustomStyles * Change rate to empty Change rate to empty * Modify CustomStyles after Bottom content Modify CustomStyles after Bottom content * Change Custom styles Change Custom styles * feat: format rate.md
2026-03-13 07:51:17 +08:00 · 2022-01-26 02:10:19 +08:00
parent 90b2f559aa
commit 5ee184fdfd
5 changed files with 77 additions and 17 deletions
--- a/docs/en-US/component/empty.md
+++ b/docs/en-US/component/empty.md
@@ -45,6 +45,29 @@ empty/bottom-content

 :::

+## Custom styles
+
+Now you can set custom style for empty component.
+Use `css/scss` language to change the global or local color. We set some global color variables: `--el-empty-fill-color-0`, `--el-empty-fill-color-1`, `--el-empty-fill-color-2`, ......, `--el-empty-fill-color-9`. You can use like: `:root { --el-empty-fill-color-0: red; --el-empty-fill-color-1: blue; }`.
+But usually, if you want to change style, you need to change all color, because these colors are a combination.
+
+### Default Variables
+
+| Variable                | Color                 |
+| ----------------------- | --------------------- |
+| --el-empty-fill-color-0 | var(--el-color-white) |
+| --el-empty-fill-color-1 | #fcfcfd               |
+| --el-empty-fill-color-2 | #f8f9fb               |
+| --el-empty-fill-color-3 | #f7f8fc               |
+| --el-empty-fill-color-4 | #eeeff3               |
+| --el-empty-fill-color-5 | #edeef2               |
+| --el-empty-fill-color-6 | #e9ebef               |
+| --el-empty-fill-color-7 | #e5e7e9               |
+| --el-empty-fill-color-8 | #e0e3e9               |
+| --el-empty-fill-color-9 | #d5d7de               |
+
+:::
+
 ## Empty Attributes

 | Attribute   | Description        | Type   | Acceptable Value | Default |
@@ -53,6 +76,8 @@ empty/bottom-content
 | image-size  | image size (width) | number | —                | —       |
 | description | description        | string | —                | —       |

+:::
+
 ## Empty Slots

 | Name        | Description           |
--- a/docs/en-US/component/rate.md
+++ b/docs/en-US/component/rate.md
@@ -86,6 +86,22 @@ rate/readonly

 :::

+## Custom styles
+
+Now you can set custom style for rate component.
+Use `css/scss` language to change the global or local color. We set some global color variables: `--el-rate-void-color`, `--el-rate-star-color`, `--el-rate-disable-void-color`, `--el-rate-text-color`. You can use like: `:root { --el-rate-void-color: red; --el-rate-star-color: blue; }`.
+
+### Default Variables
+
+| Variable                     | Color   |
+| ---------------------------- | ------- |
+| --el-rate-void-color         | #c6d1de |
+| --el-rate-star-color         | #f7ba2a |
+| --el-rate-disable-void-color | #eff2f7 |
+| --el-rate-text-color         | #1f2d3d |
+
+:::
+
 ## Attributes

 | Attribute             | Description                                                                                                                                                                                                                    | Type             | Accepted Values         | Default                                                            |
--- a/packages/components/empty/src/img-empty.vue
+++ b/packages/components/empty/src/img-empty.vue
@@ -13,8 +13,8 @@
        x2="61.1496914%"
        y2="100%"
      >
-        <stop stop-color="#FCFCFD" offset="0%" />
-        <stop stop-color="#EEEFF3" offset="100%" />
+        <stop stop-color="var(--el-empty-fill-color-1)" offset="0%" />
+        <stop stop-color="var(--el-empty-fill-color-4)" offset="100%" />
      </linearGradient>
      <linearGradient
        :id="`linearGradient-2-${id}`"
@@ -23,8 +23,8 @@
        x2="100%"
        y2="90.5%"
      >
-        <stop stop-color="#FCFCFD" offset="0%" />
-        <stop stop-color="#E9EBEF" offset="100%" />
+        <stop stop-color="var(--el-empty-fill-color-1)" offset="0%" />
+        <stop stop-color="var(--el-empty-fill-color-6)" offset="100%" />
      </linearGradient>
      <rect :id="`path-3-${id}`" x="0" y="0" width="17" height="36" />
    </defs>
@@ -40,11 +40,11 @@
          <path
            id="Oval-Copy-2"
            d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z"
-            fill="#F7F8FC"
+            fill="var(--el-empty-fill-color-3)"
          />
          <polygon
            id="Rectangle-Copy-14"
-            fill="#E5E7E9"
+            fill="var(--el-empty-fill-color-7)"
            transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) "
            points="13 58 53 58 42 45 2 45"
          />
@@ -54,13 +54,13 @@
          >
            <polygon
              id="Rectangle-Copy-10"
-              fill="#E5E7E9"
+              fill="var(--el-empty-fill-color-7)"
              transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) "
              points="2.84078316e-14 3 18 3 23 7 5 7"
            />
            <polygon
              id="Rectangle-Copy-11"
-              fill="#EDEEF2"
+              fill="var(--el-empty-fill-color-5)"
              points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"
            />
            <rect
@@ -74,7 +74,7 @@
            />
            <polygon
              id="Rectangle-Copy-13"
-              fill="#F8F9FB"
+              fill="var(--el-empty-fill-color-2)"
              transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) "
              points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"
            />
@@ -88,18 +88,18 @@
            height="36"
          />
          <g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)">
-            <mask :id="`mask-4-${id}`" fill="white">
+            <mask :id="`mask-4-${id}`" fill="var(--el-empty-fill-color-0)">
              <use :xlink:href="`#path-3-${id}`" />
            </mask>
            <use
              id="Mask"
-              fill="#E0E3E9"
+              fill="var(--el-empty-fill-color-8)"
              transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) "
              :xlink:href="`#path-3-${id}`"
            />
            <polygon
              id="Rectangle-Copy"
-              fill="#D5D7DE"
+              fill="var(--el-empty-fill-color-9)"
              :mask="`url(#mask-4-${id})`"
              transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) "
              points="7 0 24 0 20 18 -1.70530257e-13 16"
@@ -107,7 +107,7 @@
          </g>
          <polygon
            id="Rectangle-Copy-18"
-            fill="#F8F9FB"
+            fill="var(--el-empty-fill-color-2)"
            transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) "
            points="62 45 79 45 70 58 53 58"
          />
--- a/packages/components/rate/src/rate.ts
+++ b/packages/components/rate/src/rate.ts
@@ -25,15 +25,20 @@ export const rateProps = buildProps({
  },
  colors: {
    type: definePropType<string[] | Record<number, string>>([Array, Object]),
-    default: () => mutable(['#F7BA2A', '#F7BA2A', '#F7BA2A'] as const),
+    default: () =>
+      mutable([
+        'var(--el-rate-star-color)',
+        'var(--el-rate-star-color)',
+        'var(--el-rate-star-color)',
+      ] as const),
  },
  voidColor: {
    type: String,
-    default: '#C6D1DE',
+    default: 'var(--el-rate-void-color)',
  },
  disabledVoidColor: {
    type: String,
-    default: '#EFF2F7',
+    default: 'var(--el-rate-disable-void-color)',
  },
  icons: {
    type: definePropType<
@@ -67,7 +72,7 @@ export const rateProps = buildProps({
  },
  textColor: {
    type: String,
-    default: '#1f2d3d',
+    default: 'var(--el-rate-text-color)',
  },
  texts: {
    type: definePropType<string[]>(Array),
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -925,6 +925,10 @@ $rate: map.merge(
    'icon-size': 18px,
    'icon-margin': 6px,
    'icon-color': var(--el-text-color-placeholder),
+    'void-color': #c6d1de,
+    'star-color': #f7ba2a,
+    'disable-void-color': #eff2f7,
+    'text-color': #1f2d3d,
  ),
  $rate
 );
@@ -1143,6 +1147,16 @@ $empty: map.merge(
    'image-width': 160px,
    'description-margin-top': 20px,
    'bottom-margin-top': 20px,
+    'fill-color-0': var(--el-color-white),
+    'fill-color-1': #fcfcfd,
+    'fill-color-2': #f8f9fb,
+    'fill-color-3': #f7f8fc,
+    'fill-color-4': #eeeff3,
+    'fill-color-5': #edeef2,
+    'fill-color-6': #e9ebef,
+    'fill-color-7': #e5e7e9,
+    'fill-color-8': #e0e3e9,
+    'fill-color-9': #d5d7de,
  ),
  $empty
 );