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

Author: timmoy

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);
 }
 ```

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);