MD user manager (learn more page, user manager tutorial)

chrome/browser/resources/md_user_manager/user_manager.css

Index: chrome/browser/resources/md_user_manager/user_manager.css
diff --git a/chrome/browser/resources/md_user_manager/user_manager.css b/chrome/browser/resources/md_user_manager/user_manager.css
index 9f08d8b7dfb3285bfd5c4612009bc0353f74c171..44445cb39217af281ce70740864cefc51067e3b3 100644
--- a/chrome/browser/resources/md_user_manager/user_manager.css
+++ b/chrome/browser/resources/md_user_manager/user_manager.css
@@ -2,10 +2,21 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+/* TODO(mahmadi): Figure out why Material Design color palette colors don't work
+   in this file. */

[Dan Beam, 2016/03/25 02:39:14]

you probably need to import this file in user_manager.html or somewhere before
this code
https://code.google.com/p/chromium/codesearch#chromium/src/third_party/polyme...

[Moe, 2016/03/29 18:54:39]

Importing color.html doesn't seem to fix it by itself. color.html declares the
color variables on :root inside a <style is="custom-style"> element. That
apparently works differently from declaring those variables on :root in a plain
css file (you can see that when inspecting the page). Variables declared that
way seem to only work if they're used inside a <style is="custom-style"> element
in the main document or within a Polymer component. The solution I came up with
was to refactor this css file into a Polymer style module and using it like
this:
<style is="custom-style" include="user-manager-styles"></style>

+:root {
+  --google-blue-700: rgb(51, 103, 214);
+}
+
 body {
   background-color: #eee;
 }
 
+a {
+  color: var(--google-blue-700);
+  text-decoration: none;
+}
+
 /* Overrides for the desktop user manager screen. */
 
 #outer-container {