Add placeholder text in setup pin dialog

-Created a new variable in cr_input.html to control the placeholder's
text spacing. Without this change it would inherit the input field's
custom spacing which is too wide.

Bug: 1002860
Change-Id: I6ad08bf800df733ec2c8db71e5d1930fd907a61e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1806102Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#696991}

chrome/browser/resources/settings/people_page/setup_pin_dialog.html

@@ -13,6 +13,10 @@
     <style include="settings-shared">
       #pinKeyboardDiv {
         justify-content: center;
+      };
+
+      #pinKeyboard {
+        --cr-input-placeholder-letter-spacing: normal;
       }
     </style>
     <cr-dialog id="dialog" on-close="close"
@@ -28,7 +32,8 @@
               on-set-pin-done="onSetPinDone_"
               set-modes="{{setModes}}"
               quick-unlock-private="[[quickUnlockPrivate]]"
-              write-uma="[[writeUma_]]">
+              write-uma="[[writeUma_]]"
+              enable-placeholder>
           </setup-pin-keyboard>
         </div>
       </div>

ui/webui/resources/cr_elements/cr_input/cr_input.html

@@ -54,6 +54,7 @@
 
       #input::placeholder {
         color: var(--cr-input-placeholder-color);
+        letter-spacing: var(--cr-input-placeholder-letter-spacing);
       }
 
       :host([invalid]) #input {