From 535dcf1782806510f70e9f0888396327c3a36d59 Mon Sep 17 00:00:00 2001
From: timmoy <tmoy@live.ca>
Date: Wed, 31 Jan 2018 13:26:08 -0500
Subject: [PATCH] docs(theming): Document hue options available for mat-color
 sass function (#9681)

* docs(theming): updated guide with proposed documentation

* docs(theming): updated guide using theming.scss to indicate how the user
can use the preconfigured hues as well as the contrast modifier.

* docs(theming): typo fix
---
 guides/theming-your-components.md | 5 +++++
 guides/theming.md                 | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/guides/theming-your-components.md b/guides/theming-your-components.md
index e1ac8a08751..9fa51128e9d 100644
--- a/guides/theming-your-components.md
+++ b/guides/theming-your-components.md
@@ -63,8 +63,13 @@ You can use the `mat-color` function to extract a specific color from a palette.
 @import 'src/unicorn-app-theme.scss';
 
 // Use mat-color to extract individual colors from a palette as necessary.
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+// For example a hue of "darker-contrast" gives a light color to contrast with a "darker" hue
+// Available color palettes: https://www.google.com/design/spec/style/color.html
 .candy-carousel {
   background-color: mat-color($candy-app-primary);
   border-color: mat-color($candy-app-accent, A400);
+  color: mat-color($candy-app-primary, darker);
 }
 ```
diff --git a/guides/theming.md b/guides/theming.md
index 9c38f2aa242..d4f3c25c48c 100644
--- a/guides/theming.md
+++ b/guides/theming.md
@@ -75,7 +75,7 @@ A typical theme file will look something like this:
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue.
+// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
 $candy-app-primary: mat-palette($mat-indigo);
 $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);