Pin keyboard matches red lines (go/cros-quick-unlock-ux).

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

 <!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out
                              what i18n to use for keypad, ie, does 1 ABC make
                              sense in every scenario? -->
 
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/paper-styles.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 
 <dom-module id="pin-keyboard">
   <template>
     <style>
       #root {
         display: flex;
       }
 
       .row {
         display: flex;
       }
 
       .row.horizontal-center {
         justify-content: center;
       }
 
       .digit-button {
         align-items: center;
         background: none;
         border-radius: 50px;
         box-sizing: border-box;
+        color: rgb(87, 101, 107);

[jdufault, 2016/06/27 19:17:52]

Is there a paper-* color element that this value can be derived from?

[sammiequon, 2016/06/29 21:26:12]

Done.

         display: flex;
         flex-direction: column;
-        font-size: 30px;
+        font-size: 32px;
         height: 70px;
         justify-content: center;
-        margin: 0;
+        margin: 0 15px;
         min-height: 70px;
-        min-width: 85px;
+        min-width: 70px;
         padding: 15px 20px;
-        width: 85px;
+        width: 70px;
       }
 
       .digit-button.clear-button {
         display: block;
       }
 
+      .digit-button.left-button {
+        margin: 0 15px 0 0;
+      }
+
+      .digit-button.right-button {
+        margin: 0 0 0 15px;
+      }
+
       .digit-button .icon-container {
-        background: var(--paper-grey-500);
+        background: rgb(191, 197, 202);

[jdufault, 2016/06/27 19:17:52]

Is there a paper-* color element that this value can be derived from?

[sammiequon, 2016/06/29 21:26:12]

Done.

         border-radius: 100px;
         height: 24px;
         margin: auto;
         width: 24px;
       }
 
+      .digit-button .icon-container.ready-background {
+        background: blue;
+      }
+
       .digit-button .icon-container .icon {
         color: white;
         display: block;
         height: 16px;
         left: 4px;
         top: 4px;
         width: 16px;
       }
 
       .digit-button .icon-subheading {
-        color: var(--paper-grey-500);
+        color: rgb(191, 197, 202);

[jdufault, 2016/06/27 19:17:52]

Is there a paper-* color element that this value can be derived from?

[sammiequon, 2016/06/29 21:26:12]

Done.

         font-size: 10px;
-        padding: 10px;
+        left: 0;
+        position: absolute;
+        text-align: center;
         text-transform: capitalize;
+        top: 44px;
+        width: 100%;
       }
 
       .digit-button inner-text {
         display: flex;
         flex-direction: column;
         height: 52px;
       }
 
       .first-row {
-        height: 54px;
-        min-height: 54px;
+        height: 64px;
+        min-height: 64px;
+        padding: 28px 15px 12px 15px;
       }
 
       #pin-input {
         -webkit-text-security: disc;
         border: 0;
-        font-size: 20px;
-        height: 54px;
-        text-align: center;
-        width: 171px;
+        font-size: 18px;
+        height: 64px;
+        left: 20px;
+        padding: 28px 3px 12px 3px;
+        position: relative;
+        width: 180px;
       }
 
       #pin-input[type=number]::-webkit-inner-spin-button,
       #pin-input[type=number]::-webkit-outer-spin-button {
         -webkit-appearance: none;
         margin: 0;
       }
 
       /* Ensure that all children of paper-button do not consume events. This
        * simplifies the event handler code. */
       paper-button * {
         pointer-events: none;
       }
     </style>
 
     <div id="root">
       <div id="container-constrained-width">
         <div class="row horizontal-center">
           <input id="pin-input" type="number" placeholder="Enter PIN"
                  value="{{value::input}}"
                  on-keydown="onInputKeyDown_"></input>
-          <div class="digit-button first-row">
-            <paper-button class="digit-button submit-button"
-                          on-tap="firePinSubmitEvent_">
-              <div class="icon-container">
-                  <iron-icon class="icon" icon="icons:forward"><iron-icon>
-              </div>
-            </paper-button>
-          </div>
+          <paper-button class="digit-button first-row

[jdufault, 2016/06/27 19:17:52]

Will this fit on one line?

[sammiequon, 2016/06/29 21:26:12]

Done.

+                               right-button submit-button"
+                        on-tap="firePinSubmitEvent_">
+            <div class="icon-container">
+                <iron-icon class="icon" icon="icons:forward"><iron-icon>
+            </div>
+          </paper-button>
         </div>
 
         <div class="row keyboard">
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
+          <paper-button class="digit-button left-button" on-tap="onNumberTap_"

[jdufault, 2016/06/27 19:17:52]

Instead of having two left/right classes, what about applying the margins to the
middle button?

[sammiequon, 2016/06/29 21:26:12]

Done.

+                        value="1">
             <inner-text>1</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="2">
             <inner-text>2</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="3">
+          <paper-button class="digit-button right-button" on-tap="onNumberTap_"
+                        value="3">
             <inner-text>3</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="4">
+          <paper-button class="digit-button left-button" on-tap="onNumberTap_"
+                        value="4">
             <inner-text>4</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="5">
             <inner-text>5</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="6">
+          <paper-button class="digit-button right-button" on-tap="onNumberTap_"
+                        value="6">
             <inner-text>6</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="7">
+          <paper-button class="digit-button left-button" on-tap="onNumberTap_"
+                        value="7">
             <inner-text>7</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="8">
             <inner-text>8</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="9">
+          <paper-button class="digit-button right-button" on-tap="onNumberTap_"
+                        value="9">
             <inner-text>9</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
-          <div class="digit-button"></div>
+          <div class="digit-button left-button"></div>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="0">
             <inner-text>0</inner-text>
           </paper-button>
-          <paper-button class="digit-button clear-button" on-tap="onPinClear_">
+          <paper-button class="digit-button clear-button right-button"
+                        on-tap="onPinClear_">
             <div class="icon-container">
               <iron-icon class="icon" icon="icons:clear"><iron-icon>
             </div>
             <inner-text class="icon-subheading">Clear</inner-text>
           </paper-button>
         </div>
       </div>
     </div>
   </template>
   <script src="pin_keyboard.js"></script>
 </dom-module>