diff --git a/docs/app/css/style.css b/docs/app/css/style.css
index f1709e43135..29f868110cb 100644
--- a/docs/app/css/style.css
+++ b/docs/app/css/style.css
@@ -554,7 +554,6 @@ md-tabs.demo-source-tabs .active md-tab-label {
md-toolbar.demo-toolbar {
border-radius: 3px 3px 0 0;
box-shadow: 0 1px rgba(255, 255, 255, 0.1);
- color: white;
}
md-toolbar.demo-toolbar md-tab-label {
color: #99E4EE;
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
index b633f095187..971fb094671 100644
--- a/docs/app/js/app.js
+++ b/docs/app/js/app.js
@@ -51,13 +51,18 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
'800': '#014AB6',
'900': '#013583',
'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 A100',
- 'contrastStrongLightColors': '300 400 A200 A400'
+ 'contrastDarkColors': '50 100 200 300 400 A100 A200',
+ 'contrastStrongLightColors': '500 600 700 800 900 A400 A700'
}));
+
$mdThemingProvider.definePalette('docs-red', $mdThemingProvider.extendPalette('red', {
'A100': '#DE3641'
}));
+ $mdThemingProvider.definePalette('docs-warn', $mdThemingProvider.extendPalette('deep-orange', {
+ '500': '#d32f2f' // Override 500 with 700 hue for improved contrast on flat buttons
+ }));
+
$mdThemingProvider.theme('docs-dark', 'default')
.primaryPalette('yellow')
.dark();
@@ -76,8 +81,9 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
.defaultIconSet('img/icons/sets/core-icons.svg', 24);
$mdThemingProvider.theme('default')
- .primaryPalette('docs-blue')
- .accentPalette('docs-red');
+ .primaryPalette('docs-blue')
+ .accentPalette('docs-red')
+ .warnPalette('docs-warn');
$mdThemingProvider.enableBrowserColor();
diff --git a/docs/content/Theming/03_configuring_a_theme.md b/docs/content/Theming/03_configuring_a_theme.md
index 1cd46cdf20e..9618514843e 100644
--- a/docs/content/Theming/03_configuring_a_theme.md
+++ b/docs/content/Theming/03_configuring_a_theme.md
@@ -4,7 +4,7 @@
## Configuring a theme
-By default your AngularJS Material application will use the default theme, a theme
+By default, your AngularJS Material application will use the default theme, a theme
that is pre-configured with the following palettes for intention groups:
- *primary* - indigo
@@ -72,16 +72,24 @@ angular.module('myApp', ['ngMaterial'])
### Defining Custom Palettes
-As mentioned before, AngularJS Material ships with the Material Design
-Spec's color palettes built in. In the event that you need to define a custom color palette, you can use `$mdThemingProvider` to define it, thereby making
-it available to your theme for use in its intention groups. Note that you must
-specify all hues in the definition map.
+As mentioned before, AngularJS Material ships with the Material Design Spec's color palettes built
+in. In the event that you need to define a custom color palette, you can use `$mdThemingProvider`
+to define it. This makes the palette available to your theme for use in its intention groups.
+Note that you must specify all hues in the definition map. If you only want to override a few hues,
+please extend a palette (above).
+
+For a dark colored, custom palette, you should specify the default contrast color as `light`.
+For lighter hues in the palette, you may need to add them to the list of `contrastDarkColors` to
+meet contrast guidelines. Similarly, you may need to add darker hues to `contrastStrongLightColors`,
+which has been updated to the latest Material Design guidelines for
+[Color Usability](https://material.io/archive/guidelines/style/color.html#color-usability).
+The update to the guidelines changed primary text on dark backgrounds from 87% to 100% opacity.
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
- $mdThemingProvider.definePalette('amazingPaletteName', {
+ $mdThemingProvider.definePalette('amazingDarkPaletteName', {
'50': 'ffebee',
'100': 'ffcdd2',
'200': 'ef9a9a',
@@ -96,17 +104,49 @@ angular.module('myApp', ['ngMaterial'])
'A200': 'ff5252',
'A400': 'ff1744',
'A700': 'd50000',
- 'contrastDefaultColor': 'light', // whether, by default, text (contrast)
- // on this palette should be dark or light
-
- 'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
- '200', '300', '400', 'A100'],
- 'contrastLightColors': undefined // could also specify this if default was 'dark'
+ // By default, text (contrast) on this palette should be white with 87% opacity.
+ 'contrastDefaultColor': 'light',
+ // By default, for these lighter hues, text (contrast) should be 'dark'.
+ 'contrastDarkColors': '50 100 200 300 400 500 600 A100 A200 A400',
+ // By default, for these darker hues, text (contrast) should be white with 100% opacity.
+ 'contrastStrongLightColors': '700 800 900 A700'
});
$mdThemingProvider.theme('default')
- .primaryPalette('amazingPaletteName')
+ .primaryPalette('amazingDarkPaletteName')
+});
+
+
+For a light colored, custom palette, you should specify the default contrast color as `dark`.
+Then `contrastStrongLightColors` can be used if any hues are too dark for dark text.
+
+
+angular.module('myApp', ['ngMaterial'])
+.config(function($mdThemingProvider) {
+ $mdThemingProvider.definePalette('amazingLightPaletteName', {
+ '50': '#f1f8e9',
+ '100': '#dcedc8',
+ '200': '#c5e1a5',
+ '300': '#aed581',
+ '400': '#9ccc65',
+ '500': '#8bc34a',
+ '600': '#7cb342',
+ '700': '#689f38',
+ '800': '#558b2f',
+ '900': '#33691e',
+ 'A100': '#ccff90',
+ 'A200': '#b2ff59',
+ 'A400': '#76ff03',
+ 'A700': '#64dd17',
+ // By default, text (contrast) on this palette should be dark with 87% opacity.
+ 'contrastDefaultColor': 'dark',
+ // By default, for these darker hues, text (contrast) should be white with 100% opacity.
+ 'contrastStrongLightColors': '800 900'
+ });
+
+ $mdThemingProvider.theme('default')
+ .accentPalette('amazingLightPaletteName')
});
diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss
index 322c1fddb9b..966401c8c0c 100644
--- a/src/components/button/button-theme.scss
+++ b/src/components/button/button-theme.scss
@@ -52,21 +52,6 @@
}
}
}
- &.md-fab {
- background-color: '{{accent-color}}';
- color: '{{accent-contrast}}';
- &:not([disabled]) {
- .md-icon {
- color: '{{accent-contrast}}';
- }
- &:hover {
- background-color: '{{accent-A700}}';
- }
- &.md-focused {
- background-color: '{{accent-A700}}';
- }
- }
- }
&.md-raised {
color: '{{background-900}}';
diff --git a/src/components/button/demoBasicUsage/index.html b/src/components/button/demoBasicUsage/index.html
index 05a305d6c43..30a3ba196e5 100644
--- a/src/components/button/demoBasicUsage/index.html
+++ b/src/components/button/demoBasicUsage/index.html
@@ -2,10 +2,10 @@
- {{title1}}
+ ButtonPrimary (md-noink)Disabled
- {{title4}}
+ Warn
- Custom component implementations using Material elements often want to easily apply theme colors
+ Custom component implementations using Material elements often want to apply theme colors
to their custom components. Consider the custom <user-card> component below
where the md-colors attribute is used to color the background and text colors
using either the current or specified theme palette colors.
@@ -18,7 +18,7 @@
<user-card> coloring using the 'fores
Note: The md-colors directive allows pre-defined theme colors to be applied
as CSS style properties. md-colors uses the palettes defined in the
-
+
Material Design Colors and the themes defined using $mdThemingProvider.
This directive is an extension of the $mdTheming features.
+ 
+