Shortcuts: Update edit-row style to match the spec - part 1

* Update border style for edit-row.
* Key and key-container should be "disabled" when no key is pressed.
* border color should be red when there's error.

Before:
http://screen/5MBTeGNpcEcmYwB
http://screen/5RbzA3n7FoZY3vs

After:
http://screen/6G89mi2usUjKTJP
http://screen/Wx6iscPrsWvnmdZ

Bug: b/216049298
Test: browser_tests
Change-Id: I78136364ff8dafac2d96cd41803f4fd8fc84fc94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4786517
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Longbo Wei <longbowei@google.com>
Cr-Commit-Position: refs/heads/main@{#1184794}

ash/webui/shortcut_customization_ui/resources/js/accelerator_edit_view.html

@@ -69,14 +69,19 @@
   }
 
   :host([is-edit-view]) #acceleratorView {
+    background-color: var(--cros-sys-input_field_on_base);
     border-color: var(--cros-sys-focus_ring);
     border-radius: 10px;
     border-style: solid;
-    border-width: thin;
+    border-width: 2px;
     height: 52px;
     margin: 0;
     padding-inline: 10px;
   }
+
+  :host([is-edit-view][has-error]) #acceleratorView {
+    border-color: var(--cros-sys-error);
+  }
 </style>
 
 <div id="container">

ash/webui/shortcut_customization_ui/resources/js/input_key.html

@@ -3,16 +3,12 @@
     --key-alpha-numeric-selected-bg-color: var(--cros-bg-color-dropped-elevation-1);
     --key-modifier-selected-bg-color: var(--cros-highlight-color);
     --key-modifier-selected-shadow-color: var(--cros-highlight-color);
-    --key-not-selected-border-color: var(--google-grey-200);
-    --key-not-selected-shadow-color: var(--google-grey-200);
   }
 
   :host-context(body.jelly-enabled) {
     --key-alpha-numeric-selected-bg-color: var(--cros-sys-surface_variant);
     --key-modifier-selected-bg-color: var(--cros-sys-highlight_shape);
     --key-modifier-selected-shadow-color: var(--cros-sys-highlight_shape);
-    --key-not-selected-border-color: var(--cros-sys-on_surface);
-    --key-not-selected-shadow-color: var(--cros-sys-on_surface);
   }
 
   .key-container {
@@ -42,10 +38,15 @@
   }
 
   :host([key-state='not-selected']) .key-container {
-    border-color: var(--key-not-selected-border-color);
-    border-style: solid;
-    border-width: thin;
-    box-shadow: 0 1px 1px var(--key-not-selected-shadow-color);
+    outline: 1px solid var(--cros-separator-color);
+  }
+
+  :host([key-state='not-selected']) #key-text {
+    color: var(--cros-text-color-disabled);
+  }
+
+  :host([key-state='not-selected']) #key-icon{
+    --iron-icon-fill-color: var(--cros-text-color-disabled);
   }
 
   :host([key-state='modifier-selected']) .key-container {