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

chrome/browser/resources/ntp4/new_tab_theme.css

Index: chrome/browser/resources/ntp4/new_tab_theme.css
diff --git a/chrome/browser/resources/ntp4/new_tab_theme.css b/chrome/browser/resources/ntp4/new_tab_theme.css
index 52281e8b706e581af0876f60d2bc5fce51a51cd1..4b822b529d482383bb19ce33d1c552e978ab0362 100644
--- a/chrome/browser/resources/ntp4/new_tab_theme.css
+++ b/chrome/browser/resources/ntp4/new_tab_theme.css
@@ -4,97 +4,97 @@
 
 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: ${colorTextRgba};
   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: ${colorTextRgba};
 }
 
 .page-switcher {
-  color: rgba($23, 0.5);  /* COLOR_NTP_TEXT */
+  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,

[Dan Beam, 2016/01/29 23:27:55]

don't make functional changes while refactoring next time (this broke the page
switcher's background on chrome://apps and has made its way to stable)

+      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: ${colorTextRgba};
 }
 
 .bare-minimum .disclosure-triangle {
-  background-color: $8;  /* COLOR_NTP_TEXT */
+  background-color: ${colorTextRgba};
 }
 
 .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};
 }