简化color组件样式

src/form/color.js

@@ -156,6 +156,8 @@ class Color extends Component {
         position: relative;
         width: 32px;
         height: 32px;
+        -webkit-user-select: none;
+        user-select: none;
       }
       .alpha-bg {
         background: linear-gradient(
@@ -177,6 +179,14 @@ class Color extends Component {
         background-size: 12px 12px;
         background-position: 0 0, 6px 6px;
       }
+
+      .focus {
+        transition: box-shadow 0.15s linear;
+
+        &:focus-within {
+          box-shadow: 0 0 0 2px var(--color-plain-a);
+        }
+      }
     `,
     // 预览
     css`
@@ -187,7 +197,6 @@ class Color extends Component {
         border: 1px solid var(--color-grey-2);
         border-radius: 3px;
         cursor: pointer;
-        transition: box-shadow 0.15s linear;
 
         span {
           width: 100%;
@@ -197,10 +206,6 @@ class Color extends Component {
           background: var(--value);
           outline: none;
         }
-
-        &:focus-within {
-          box-shadow: 0 0 0 2px var(--color-plain-a);
-        }
       }
     `,
     // .color-panel
@@ -213,8 +218,8 @@ class Color extends Component {
         top: 38px;
         width: 310px;
         padding: 5px;
-        background: #fff;
+        background: var(--color-plain-1);
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+        box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
       }
       .dashboard {
         display: flex;
@@ -276,9 +281,9 @@ class Color extends Component {
               display: block;
               width: 12px;
               height: 12px;
+              border: 1px solid #888;
               border-radius: 50%;
               background: #fff;
-              box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
               transform: translateY(-6px);
               content: '';
             }
@@ -312,9 +317,9 @@ class Color extends Component {
             display: block;
             width: 12px;
             height: 12px;
+            border: 1px solid #888;
             border-radius: 50%;
             background: #fff;
-            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
             transform: translateX(-6px);
             content: '';
           }
@@ -335,43 +340,34 @@ class Color extends Component {
         justify-content: space-between;
         align-items: center;
         padding: 6px 0;
+        font-size: 12px;
 
         .input {
           width: 200px;
           height: 24px;
           padding: 0 6px;
           line-height: 22px;
-          font: inherit;
+          font-family: monospace;
-          font-size: 12px;
+          border: 1px solid var(--color-grey-2);
-          border: 2px solid var(--color-plain-2);
+          border-radius: 3px;
-          border-radius: 4px;
           outline: none;
           color: var(--color-dark-1);
-          transition: box-shadow 0.15s linear;
 
           &::placeholder {
             color: var(--color-grey-1);
           }
-          &:focus {
-            box-shadow: 0 0 0 2px var(--color-plain-a);
-          }
         }
 
         .clear,
         .submit {
-          font-size: 12px;
+          color: var(--color-dark-1);
           cursor: pointer;
-          user-select: none;
-        }
-
-        .clear {
-          color: var(--color-grey-3);
         }
 
         .submit {
           padding: 2px 6px;
           border-radius: 2px;
-          color: var(--color-plain-1);
+          color: #fff;
           background: var(--color-teal-2);
           outline: none;
           transition: box-shadow 0.15s linear, background 0.15s linear;
@@ -379,10 +375,6 @@ class Color extends Component {
           &:hover {
             background: var(--color-teal-1);
           }
-
-          &:focus {
-            box-shadow: 0 0 0 2px var(--color-teal-a);
-          }
         }
       }
     `,
@@ -597,7 +589,7 @@ class Color extends Component {
 
     return html`
       <main class="container" style=${styles}>
-        <section class="preview alpha-bg" @click=${this.toggleColorPanel}>
+        <section class="preview focus alpha-bg" @click=${this.toggleColorPanel}>
           <span tabindex=${this.disabled ? -1 : 0}></span>
         </section>
 
@@ -625,9 +617,9 @@ class Color extends Component {
           </section>
 
           <section class="input-box">
-            <input class="input" :value=${this.#value} maxlength="25" />
+            <input class="input focus" :value=${this.#value} maxlength="25" />
             <a class="clear" @click=${_ => this.#close(true)}>清除</a>
-            <a tabindex="0" class="submit" @click=${this.#submit}>确定</a>
+            <a tabindex="0" class="submit focus" @click=${this.#submit}>确定</a>
           </section>
         </div>
       </main>