feat(theming): add contrast opacity values for all color types and hues

Add opacity keyword support (`secondary`, `icon`, `disabled`, `hint`, `divider`)
Deprecate documentation of `foreground-*` in favor of `background-default-contrast-*`
Allow `foregroundPallete` to override colors on default background and hues of equal contrast type

Author: clshortfuse

docs/guides/THEMES_IMPL_NOTES.md

@@ -12,7 +12,7 @@ the `$mdTheming` service and tacked into the document head.
 * Instead of using hard-coded color or a SCSS variable, the colors are defined with a mini-DSL
 (described deblow).
 * The build process takes all of those `-theme.scss` files and globs them up into one enourmous
-string.  
+string.
 * The build process wraps that string with code to set it an angular module constant:
     ``` angular.module('material.core').constant('$MD_THEME_CSS', 'HUGE_THEME_STRING'); ```
 * That code gets dumped at the end of `angular-material.js`
@@ -24,15 +24,20 @@ mini-DSL, applies the colors for the theme, and appends the resulting CSS into t
 
 
 ### The mini-DSL
-* Each color is written in the form `'{{palette-hue-opacity}}'`, where opacity is optional. 
+* Each color is written in the form `'{{palette-hue-contrast-opacity}}'`, where `hue`, `contrast`,
+and opacity are optional.
 * For example, `'{{primary-500}}'`
-* Palettes are `primary`, `accent`, `warn`, `background`, `foreground`
-* The hues for each type except `foreground` use the Material Design hues.
-* The `forground` palette is a number from one to four:
-  * `foreground-1`: text
-  * `foreground-2`: secondary text, icons
-  * `foreground-3`: disabled text, hint text
-  * `foreground-4`: dividers  
-* There is also a special hue called `contrast` that will give a contrast color (for text). 
-For example, `accent-contrast` will be a contrast color for the accent color, for use as a text 
-color on an accent-colored background.
+* Palettes are `primary`, `accent`, `warn`, `background`
+* The hues for each type use the Material Design hues. When not specified, each palette defaults
+`hue` to `500` with the exception of `background`
+* The `opacity` value can be a decimal between 0 and 1 or one the following values:
+  * `icon`: icon
+  * `secondary`: secondary text,
+  * `disabled`: disabled text or icons
+  * `hint`: hint text,
+  * `divider`: dividers
+* Default values for `opacity` differ based on light and dark theme
+* `contrast` will give a contrast color (for text) and can be mixed with `opacity`.
+For example, `accent-contrast` will be a contrast color for the accent color, for use as a text
+color on an accent-colored background. Adding an `opacity` value as in `accent-contrast-icon` will
+apply the Material Design icon opacity.

src/core/services/theming/theme.palette.js

@@ -16,8 +16,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#ff1744',
     'A700': '#d50000',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 300 A100',
-    'contrastStrongLightColors': '400 500 600 700 A200 A400 A700'
+    'contrastDarkColors': '50 100 200 300 A100'
   },
   'pink': {
     '50': '#fce4ec',
@@ -35,8 +34,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#f50057',
     'A700': '#c51162',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 A100',
-    'contrastStrongLightColors': '500 600 A200 A400 A700'
+    'contrastDarkColors': '50 100 200 A100'
   },
   'purple': {
     '50': '#f3e5f5',
@@ -54,8 +52,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#d500f9',
     'A700': '#aa00ff',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 A100',
-    'contrastStrongLightColors': '300 400 A200 A400 A700'
+    'contrastDarkColors': '50 100 200 A100'
   },
   'deep-purple': {
     '50': '#ede7f6',
@@ -73,8 +70,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#651fff',
     'A700': '#6200ea',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 A100',
-    'contrastStrongLightColors': '300 400 A200'
+    'contrastDarkColors': '50 100 200 A100'
   },
   'indigo': {
     '50': '#e8eaf6',
@@ -92,8 +88,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#3d5afe',
     'A700': '#304ffe',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 A100',
-    'contrastStrongLightColors': '300 400 A200 A400'
+    'contrastDarkColors': '50 100 200 A100'
   },
   'blue': {
     '50': '#e3f2fd',
@@ -111,8 +106,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#2979ff',
     'A700': '#2962ff',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 300 400 A100',
-    'contrastStrongLightColors': '500 600 700 A200 A400 A700'
+    'contrastDarkColors': '50 100 200 300 400 A100'
   },
   'light-blue': {
     '50': '#e1f5fe',
@@ -130,8 +124,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#00b0ff',
     'A700': '#0091ea',
     'contrastDefaultColor': 'dark',
-    'contrastLightColors': '600 700 800 900 A700',
-    'contrastStrongLightColors': '600 700 800 A700'
+    'contrastLightColors': '600 700 800 900 A700'
   },
   'cyan': {
     '50': '#e0f7fa',
@@ -149,8 +142,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#00e5ff',
     'A700': '#00b8d4',
     'contrastDefaultColor': 'dark',
-    'contrastLightColors': '700 800 900',
-    'contrastStrongLightColors': '700 800 900'
+    'contrastLightColors': '700 800 900'
   },
   'teal': {
     '50': '#e0f2f1',
@@ -168,8 +160,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#1de9b6',
     'A700': '#00bfa5',
     'contrastDefaultColor': 'dark',
-    'contrastLightColors': '500 600 700 800 900',
-    'contrastStrongLightColors': '500 600 700'
+    'contrastLightColors': '500 600 700 800 900'
   },
   'green': {
     '50': '#e8f5e9',
@@ -187,8 +178,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#00e676',
     'A700': '#00c853',
     'contrastDefaultColor': 'dark',
-    'contrastLightColors': '500 600 700 800 900',
-    'contrastStrongLightColors': '500 600 700'
+    'contrastLightColors': '600 700 800 900'
   },
   'light-green': {
     '50': '#f1f8e9',
@@ -206,8 +196,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#76ff03',
     'A700': '#64dd17',
     'contrastDefaultColor': 'dark',
-    'contrastLightColors': '700 800 900',
-    'contrastStrongLightColors': '700 800 900'
+    'contrastLightColors': '700 800 900'
   },
   'lime': {
     '50': '#f9fbe7',
@@ -225,8 +214,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#c6ff00',
     'A700': '#aeea00',
     'contrastDefaultColor': 'dark',
-    'contrastLightColors': '900',
-    'contrastStrongLightColors': '900'
+    'contrastLightColors': '900'
   },
   'yellow': {
     '50': '#fffde7',
@@ -278,8 +266,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#ff9100',
     'A700': '#ff6d00',
     'contrastDefaultColor': 'dark',
-    'contrastLightColors': '800 900',
-    'contrastStrongLightColors': '800 900'
+    'contrastLightColors': '800 900'
   },
   'deep-orange': {
     '50': '#fbe9e7',
@@ -297,8 +284,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#ff3d00',
     'A700': '#dd2c00',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 300 400 A100 A200',
-    'contrastStrongLightColors': '500 600 700 800 900 A400 A700'
+    'contrastDarkColors': '50 100 200 300 400 A100 A200'
   },
   'brown': {
     '50': '#efebe9',
@@ -316,8 +302,7 @@ angular.module('material.core.theming.palette', [])
     'A400': '#8d6e63',
     'A700': '#5d4037',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 A100 A200',
-    'contrastStrongLightColors': '300 400'
+    'contrastDarkColors': '50 100 200 A100 A200'
   },
   'grey': {
     '50': '#fafafa',
@@ -353,7 +338,6 @@ angular.module('material.core.theming.palette', [])
     'A400': '#78909c',
     'A700': '#455a64',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 300 A100 A200',
-    'contrastStrongLightColors': '400 500 700'
+    'contrastDarkColors': '50 100 200 300 A100 A200'
   }
 });