[ui/base;css] adding string template expression replacement

chrome/browser/resources/ntp4/new_tab_theme.css

 /* Copyright (c) 2012 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. */
 
 html {
   background-attachment: fixed;
-  background-color: $2;  /* COLOR_NTP_BACKGROUND */
-  background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?$1);
-  background-position: $3;
-  background-repeat: $5;
+  background-color: ${colorBackground};
+  background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?${themeId});
+  background-position: ${backgroundBarDetached};
+  background-repeat: ${backgroundTiling};
 }
 
 #attribution-img {
-  content: url(chrome://theme/IDR_THEME_NTP_ATTRIBUTION?$1);
+  content: url(chrome://theme/IDR_THEME_NTP_ATTRIBUTION?${themeId});
 }
 
 html[bookmarkbarattached='true'] {
-  background-position: $4;
+  background-position: ${backgroundBarAttached};
 }
 
 body {
-  color: $8;  /* COLOR_NTP_TEXT */
+  color: ${colorTextCall};
   height: 100%;
   overflow: auto;
 }
 
 #attribution,
 [is='action-link'] {
-  color: $21;  /* COLOR_NTP_TEXT_LIGHT */
+  color: ${colorTextLight};
 }
 
 [is='action-link']:active {
-  color: $8;  /* COLOR_NTP_TEXT */
+  color: ${colorTextCall};
 }
 
 .page-switcher {
-  color: rgba($23, 0.5);  /* COLOR_NTP_TEXT */

[Dan Beam, 2015/07/14 21:23:40]

same NTP_* for different numbers... lame

[dschuyler, 2015/07/15 00:11:04]

I think the original author may have been saying that it's the same color value
formatted in different ways.

+  color: rgba(${colorText}, 0.5);
 }
 
 .page-switcher:hover,
 .page-switcher:focus,
 .page-switcher.drag-target {
-  background-color: rgba($23, 0.06);  /* COLOR_NTP_TEXT */
+  background-color: rgba(${colorText}, 0.06);
 }
 
 /* Only change the background to a gradient when a promo is showing. */
 .showing-login-area #page-switcher-end:hover,
 .showing-login-area #page-switcher-end:focus,
 .showing-login-area #page-switcher-end.drag-target {
-  background:
-      -webkit-linear-gradient(top, rgba($23, 0) 0,
-                                   rgba($23, .01) 60px,
-                                   rgba($23, .06) 183px);  /* COLOR_NTP_TEXT */
+  background: linear-gradient(top,
+      rgba(${colorText}, 0) 0,
+      rgba(${colorText}, .01) 60px,
+      rgba(${colorText}, .06) 183px);
 }
 
 .tile-page-scrollbar {
-  background-color: $21;  /* COLOR_NTP_TEXT_LIGHT */
+  background-color: ${colorTextLight};
 }
 
 /* Footer *********************************************************************/
 
 #footer-border {
-  background: -webkit-linear-gradient(left,
-      rgba($22, 0.2),  /* COLOR_NTP_SECTION_BORDER */
-      rgba($22, 0.3) 20%,  /* COLOR_NTP_SECTION_BORDER */
-      rgba($22, 0.3) 80%,  /* COLOR_NTP_SECTION_BORDER */
-      rgba($22, 0.2));  /* COLOR_NTP_SECTION_BORDER */
+  background: linear-gradient(left,
+      rgba(${colorSectionBorder}, 0.2),
+      rgba(${colorSectionBorder}, 0.3) 20%,
+      rgba(${colorSectionBorder}, 0.3) 80%,
+      rgba(${colorSectionBorder}, 0.2));
 }
 
 .dot input:focus {
-  background-color: $2;  /* COLOR_NTP_BACKGROUND */
+  background-color: ${colorBackground};
 }
 
 .bare-minimum #footer {
-  color: $8;  /* COLOR_NTP_TEXT */
+  color: ${colorTextCall};
 }
 
 .bare-minimum .disclosure-triangle {
-  background-color: $8;  /* COLOR_NTP_TEXT */
+  background-color: ${colorTextCall};
 }
 
 .bare-minimum .footer-menu-button:hover,
 .bare-minimum .footer-menu-button[menu-shown],
 .bare-minimum #chrome-web-store-link:hover {
-  color: rgba($23, 0.85);  /* COLOR_NTP_TEXT */
+  color: rgba(${colorText}, 0.85);
 }
 
 .bare-minimum .footer-menu-button:hover .disclosure-triangle,
 .bare-minimum .footer-menu-button[menu-shown] .disclosure-triangle {
-  background-color: rgba($23, 0.85);  /* COLOR_NTP_TEXT */
+  background-color: rgba(${colorText}, 0.85);
 }
 
 .thumbnail-wrapper {
   /* This shows through at the (rounded) thumbnail's corners. */
-  background-color: $11;  /* COLOR_NTP_SECTION_BORDER */
+  background-color: ${colorSectionBorder};
 }
 
 .filler .thumbnail {
-  border-color: $2;  /* COLOR_NTP_BACKGROUND */
+  border-color: ${colorBackground};
 }