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

chrome/browser/resources/md_user_manager/user_manager.css

 /* Copyright 2016 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. */
 
+/* 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 {
   min-height: 0;
 }
 
 .bubble.faded {
   opacity: 0;
 }
 
@@ skipping 179 matching lines @@
 .action-box-remove-user-warning .remove-warning-button {
   height: 30px;
 }
 
 .action-box-remove-user-warning .remove-warning-button:focus {
   /* Override the default blue border inherited from
   button.custom-appearance:focus. */
   border: 1px solid transparent !important;
   box-shadow: inset 0 0 0 1px #fff;
 }