ColorPicker: update docs for predefine (#10237)

examples/docs/en-US/color-picker.md

@@ -6,17 +6,22 @@
         color2: null,
         color3: 'rgba(19, 206, 102, 0.8)',
         color4: '#409EFF',
-        color5: 'hsva(180, 65, 20, 0.5)',
+        color5: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
-          'rgba(19, 206, 102, 0.18)',
-          'rgb(25, 159, 147)',
-          'hsv(250, 54, 98)',
-          'hsva(180, 65, 20, 0.5)',
-          'hsl(170, 32%, 87%)',
-          'hsla(45, 62%, 47%, 0.13)',
-          '#7486de',
-          '#45aa9477',
-          '#892345'
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
         ]
       };
     },
@@ -100,27 +105,36 @@ ColorPicker is a color selector supporting multiple color formats.
 ```
 :::
 
-### Predefine colors
+### Predefined colors
 
-:::demo ColorPicker supports predefine colors
+:::demo ColorPicker supports predefined color options
 ```html
-<el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
+<el-color-picker
+  v-model="color5"
+  show-alpha
+  :predefine="predefineColors">
+</el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color5: 'hsva(180, 65, 20, 0.5)',
+        color5: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
-          'rgba(19, 206, 102, 0.18)',
-          'rgb(25, 159, 147)',
-          'hsv(250, 54, 98)',
-          'hsva(180, 65, 20, 0.5)',
-          'hsl(170, 32%, 87%)',
-          'hsla(45, 62%, 47%, 0.13)',
-          '#7486de',
-          '#45aa9477',
-          '#892345'
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
         ]
       }
     }
@@ -159,7 +173,7 @@ ColorPicker is a color selector supporting multiple color formats.
 | show-alpha | whether to display the alpha slider | boolean | — | false |
 | color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
 | popper-class | custom class name for ColorPicker's dropdown | string | — | — |
-| predefine | predefine some colors | array | — | — |
+| predefine | predefined color options | array | — | — |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/es/color-picker.md

@@ -6,17 +6,22 @@
         color2: null,
         color3: 'rgba(19, 206, 102, 0.8)',
         color4: '#409EFF',
-        color5: 'hsva(180, 65, 20, 0.5)',
+        color5: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
-          'rgba(19, 206, 102, 0.18)',
-          'rgb(25, 159, 147)',
-          'hsv(250, 54, 98)',
-          'hsva(180, 65, 20, 0.5)',
-          'hsl(170, 32%, 87%)',
-          'hsla(45, 62%, 47%, 0.13)',
-          '#7486de',
-          '#45aa9477',
-          '#892345'
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
         ]
       };
     },
@@ -100,27 +105,36 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 ```
 :::
 
-### Colores predefinidos
+### Predefined colors
 
-:::demo ColorPicker admite colores predefinidos
+:::demo ColorPicker supports predefined color options
 ```html
-<el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
+<el-color-picker
+  v-model="color5"
+  show-alpha
+  :predefine="predefineColors">
+</el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color5: 'hsva(180, 65, 20, 0.5)',
+        color5: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
-          'rgba(19, 206, 102, 0.18)',
-          'rgb(25, 159, 147)',
-          'hsv(250, 54, 98)',
-          'hsva(180, 65, 20, 0.5)',
-          'hsl(170, 32%, 87%)',
-          'hsla(45, 62%, 47%, 0.13)',
-          '#7486de',
-          '#45aa9477',
-          '#892345'
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
         ]
       }
     }
@@ -158,7 +172,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 | show-alpha   | especifica si se muestra el control deslizante para el valor alpha | boolean | —                     | false                                    |
 | color-format | formato de color del `v-model`           | string  | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
 | popper-class | nombre de clase para el dropdown del ColorPicker | string  | —                     | —                                        |
-| predefine | colores predefinidos | array | — | — |
+| predefine    | predefined color options | array | — | — |
 
 ### Eventos
 | Nombre de Evento | Descripción                              | Parametros             |

examples/docs/zh-CN/color-picker.md

@@ -6,17 +6,22 @@
         color2: null,
         color3: 'rgba(19, 206, 102, 0.8)',
         color4: '#409EFF',
-        color5: 'hsva(180, 65, 20, 0.5)',
+        color5: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
-          'rgba(19, 206, 102, 0.18)',
-          'rgb(25, 159, 147)',
-          'hsv(250, 54, 98)',
-          'hsva(180, 65, 20, 0.5)',
-          'hsl(170, 32%, 87%)',
-          'hsla(45, 62%, 47%, 0.13)',
-          '#7486de',
-          '#45aa9477',
-          '#892345'
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
         ]
       };
     },
@@ -104,23 +109,32 @@
 
 :::demo ColorPicker 支持预定义颜色
 ```html
-<el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
+<el-color-picker
+  v-model="color5"
+  show-alpha
+  :predefine="predefineColors">
+</el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color5: 'hsva(180, 65, 20, 0.5)',
+        color5: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
-          'rgba(19, 206, 102, 0.18)',
-          'rgb(25, 159, 147)',
-          'hsv(250, 54, 98)',
-          'hsva(180, 65, 20, 0.5)',
-          'hsl(170, 32%, 87%)',
-          'hsla(45, 62%, 47%, 0.13)',
-          '#7486de',
-          '#45aa9477',
-          '#892345'
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
         ]
       }
     }

packages/color-picker/src/components/predefine.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="el-color-predefine">
-    预设：
     <div class="el-color-predefine__colors">
       <div class="el-color-predefine__color-selector"
            :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
@@ -24,8 +23,8 @@
     },
     data() {
       return {
-        rgbaColors: this.parseColors(this.colors, this.color),
-      }
+        rgbaColors: this.parseColors(this.colors, this.color)
+      };
     },
     methods: {
       handleSelect(index) {

packages/theme-chalk/src/color-picker.scss

@@ -5,6 +5,7 @@
   display: flex;
   font-size: 12px;
   margin-top: 8px;
+  width: 280px;
 
   @include e(colors) {
     display: flex;
@@ -13,20 +14,24 @@
   }
 
   @include e(color-selector) {
-    margin: 0 0 6px 6px;
-    width: 24px;
-    height: 24px;
-    border: 1px #8c939d solid;
-    border-radius: 2px;
+    margin: 0 0 8px 8px;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
     cursor: pointer;
 
+    &:nth-child(10n + 1) {
+      margin-left: 0;
+    }
+
     &.selected {
-      border: 3px $--color-primary solid;
+      box-shadow: 0 0 3px 2px $--color-primary;
     }
 
     > div {
       display: flex;
       height: 100%;
+      border-radius: 3px;
     }
 
     @include when(alpha) {