Makes the hint text darker for lower rows.

ui/keyboard/resources/elements/kb-row.html

 <!--
   -- Copyright (c) 2013 The Chromium Authors. All rights reserved.
   -- Use of this source code is governed by a BSD-style license that can be
   -- found in the LICENSE file.
   -->
 
 <polymer-element name="kb-row" attributes="align weight">
   <template>
     <style>
     :host {
@@ skipping 37 matching lines @@
       border-top-color: #717171;
     }
 
     :host>:not(.dark):not(.active) {
       -webkit-box-shadow: inset 0px 1px #565656, inset 0px -1px #434343;
       background-image: -webkit-linear-gradient(#484848, #474747);
       background-size: cover;
       border-bottom-color: #393939;
       border-top-color: #717171;
     }
+
+    :host:nth-child(2) ::part(hint) {
+      color: #2C2C2C;
+    }
+
+    :host:nth-child(3) ::part(hint) {
+      color: #272727;
+    }
+
+    :host:nth-child(4) ::part(hint) {
+      color: #232323;
+    }
     </style>
     <content select="*"></content>
   </template>
   <script>
     Polymer('kb-row', {
       align: RowAlignment.STRETCH,
       weight: DEFAULT_KEY_WEIGHT_Y,
     });
   </script>
 </polymer-element>