diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js
index b8c535d40b7..7d26ddd5ca4 100644
--- a/src/core/services/theming/theming.js
+++ b/src/core/services/theming/theming.js
@@ -119,42 +119,7 @@ function detectDisabledThemes($mdThemingProvider) {
*/
/**
- * @ngdoc method
- * @name $mdThemingProvider#registerStyles
- * @param {string} styles The styles to be appended to AngularJS Material's built in theme css.
- */
-/**
- * @ngdoc method
- * @name $mdThemingProvider#setNonce
- * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.
- * Setting a value allows the use of CSP policy without using the unsafe-inline directive.
- */
-
-/**
- * @ngdoc method
- * @name $mdThemingProvider#setDefaultTheme
- * @param {string} themeName Default theme name to be applied to elements. Default value is `default`.
- */
-
-/**
- * @ngdoc method
- * @name $mdThemingProvider#alwaysWatchTheme
- * @param {boolean} watch Whether or not to always watch themes for changes and re-apply
- * classes when they change. Default is `false`. Enabling can reduce performance.
- */
-
-/**
- * @ngdoc method
- * @name $mdThemingProvider#enableBrowserColor
- * @param {Object=} options Options object for the browser color
- * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
- * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',
- * 'accent', 'background' and 'warn'. Default is `primary`.
- * `hue` - The hue from the selected palette. Default is `800`
- * @returns {Function} remove function of the browser color
- */
-
-/* Some Example Valid Theming Expressions
+ * Some Example Valid Theming Expressions
* =======================================
*
* Intention group expansion: (valid for primary, accent, warn, background)
@@ -175,7 +140,6 @@ function detectDisabledThemes($mdThemingProvider) {
* {{foreground-2}} - used for secondary text/divider
* {{foreground-3}} - used for disabled text
* {{foreground-4}} - used for dividers
- *
*/
// In memory generated CSS rules; registered by theme.name
@@ -279,7 +243,7 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
/**
* Adds `theme-color` and `msapplication-navbutton-color` meta tags with the color parameter
* @param {string} color Hex value of the wanted browser color
- * @returns {Function} Remove function of the meta tags
+ * @returns {function} Remove function of the meta tags
*/
var setBrowserColor = function (color) {
// Chrome, Firefox OS and Opera
@@ -294,20 +258,18 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
};
/**
- * Enables browser header coloring
- * for more info please visit:
- * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color
- *
- * The default color is `800` from `primary` palette of the `default` theme
- *
- * options are:
- * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme
- * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',
- * 'accent', 'background' and 'warn'. Default is `primary`
- * `hue` - The hue from the selected palette. Default is `800`
- *
- * @param {Object=} options Options object for the browser color
- * @returns {Function} remove function of the browser color
+ * @ngdoc method
+ * @name $mdThemingProvider#enableBrowserColor
+ * @description
+ * Enables browser header coloring. For more info please visit
+ *
+ * Web Fundamentals.
+ * @param {object=} options Options for the browser color, which include:
+ * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
+ * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`,
+ * `accent`, `background`, and `warn`. Default is `primary`.
+ * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
+ * @returns {function} Function that removes the browser coloring when called.
*/
var enableBrowserColor = function (options) {
options = angular.isObject(options) ? options : {};
@@ -340,18 +302,33 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
},
/**
- * Easy way to disable theming without having to use
- * `.constant("$MD_THEME_CSS","");` This disables
- * all dynamic theme style sheet generations and injections...
+ * @ngdoc method
+ * @name $mdThemingProvider#disableTheming
+ * @description
+ * An easier way to disable theming without having to use `.constant("$MD_THEME_CSS","");`.
+ * This disables all dynamic theme style sheet generations and injections.
+ * @param {boolean=} isDisabled Disable all dynamic theme style sheet generations and injections
+ * if `true` or `undefined`.
*/
disableTheming: function(isDisabled) {
themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled;
},
+ /**
+ * @ngdoc method
+ * @name $mdThemingProvider#registerStyles
+ * @param {string} styles The styles to be appended to AngularJS Material's built in theme CSS.
+ */
registerStyles: function(styles) {
themeConfig.registeredStyles.push(styles);
},
+ /**
+ * @ngdoc method
+ * @name $mdThemingProvider#setNonce
+ * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.
+ * Setting a value allows the use of CSP policy without using the unsafe-inline directive.
+ */
setNonce: function(nonceValue) {
themeConfig.nonce = nonceValue;
},
@@ -360,10 +337,21 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
themeConfig.generateOnDemand = onDemand;
},
+ /**
+ * @ngdoc method
+ * @name $mdThemingProvider#setDefaultTheme
+ * @param {string} theme Default theme name to be applied to elements. Default value is `default`.
+ */
setDefaultTheme: function(theme) {
defaultTheme = theme;
},
+ /**
+ * @ngdoc method
+ * @name $mdThemingProvider#alwaysWatchTheme
+ * @param {boolean} alwaysWatch Whether or not to always watch themes for changes and re-apply
+ * classes when they change. Default is `false`. Enabling can reduce performance.
+ */
alwaysWatchTheme: function(alwaysWatch) {
alwaysWatchTheme = alwaysWatch;
},
@@ -379,16 +367,71 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
_rgba: rgba
};
- // Example: $mdThemingProvider.definePalette('neonRed', { 50: '#f5fafa', ... });
+ /**
+ * @ngdoc method
+ * @name $mdThemingProvider#definePalette
+ * @description
+ * In the event that you need to define a custom color palette, you can use this function to
+ * make it available to your theme for use in its intention groups.
+ * Note that you must specify all hues in the definition map.
+ * @param {string} name Name of palette being defined
+ * @param {object} map Palette definition that includes hue definitions and contrast colors:
+ * - `'50'` - `{string}`: HEX color
+ * - `'100'` - `{string}`: HEX color
+ * - `'200'` - `{string}`: HEX color
+ * - `'300'` - `{string}`: HEX color
+ * - `'400'` - `{string}`: HEX color
+ * - `'500'` - `{string}`: HEX color
+ * - `'600'` - `{string}`: HEX color
+ * - `'700'` - `{string}`: HEX color
+ * - `'800'` - `{string}`: HEX color
+ * - `'900'` - `{string}`: HEX color
+ * - `'A100'` - `{string}`: HEX color
+ * - `'A200'` - `{string}`: HEX color
+ * - `'A400'` - `{string}`: HEX color
+ * - `'A700'` - `{string}`: HEX color
+ * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`
+ * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).
+ * For example: `['50', '100', '200', '300', '400', 'A100']`.
+ * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).
+ * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.
+ */
function definePalette(name, map) {
map = map || {};
PALETTES[name] = checkPaletteValid(name, map);
return themingProvider;
}
- // Returns an new object which is a copy of a given palette `name` with variables from
- // `map` overwritten
- // Example: var neonRedMap = $mdThemingProvider.extendPalette('red', { 50: '#f5fafafa' });
+ /**
+ * @ngdoc method
+ * @name $mdThemingProvider#extendPalette
+ * @description
+ * Sometimes it is easier to extend an existing color palette and then change a few properties,
+ * rather than defining a whole new palette.
+ * @param {string} name Name of palette being extended
+ * @param {object} map Palette definition that includes optional hue definitions and contrast colors:
+ * - `'50'` - `{string}`: HEX color
+ * - `'100'` - `{string}`: HEX color
+ * - `'200'` - `{string}`: HEX color
+ * - `'300'` - `{string}`: HEX color
+ * - `'400'` - `{string}`: HEX color
+ * - `'500'` - `{string}`: HEX color
+ * - `'600'` - `{string}`: HEX color
+ * - `'700'` - `{string}`: HEX color
+ * - `'800'` - `{string}`: HEX color
+ * - `'900'` - `{string}`: HEX color
+ * - `'A100'` - `{string}`: HEX color
+ * - `'A200'` - `{string}`: HEX color
+ * - `'A400'` - `{string}`: HEX color
+ * - `'A700'` - `{string}`: HEX color
+ * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`
+ * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).
+ * For example: `['50', '100', '200', '300', '400', 'A100']`.
+ * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).
+ * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.
+ * @returns {object} A new object which is a copy of the given palette, `name`,
+ * with variables from `map` overwritten.
+ */
function extendPalette(name, map) {
return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map) );
}
@@ -407,10 +450,16 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
return map;
}
- // Register a theme (which is a collection of color palettes to use with various states
- // ie. warn, accent, primary )
- // Optionally inherit from an existing theme
- // $mdThemingProvider.theme('custom-theme').primaryPalette('red');
+ /**
+ * @ngdoc method
+ * @name $mdThemingProvider#theme
+ * @description
+ * Register a theme (which is a collection of color palettes); i.e. `warn`, `accent`,
+ * `background`, and `primary`.
+ * Optionally inherit from an existing theme.
+ * @param {string} name Name of theme being registered
+ * @param {string=} inheritFrom Existing theme name to inherit from
+ */
function registerTheme(name, inheritFrom) {
if (THEMES[name]) return THEMES[name];
@@ -522,28 +571,29 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
* @ngdoc service
* @name $mdTheming
* @module material.core.theming
- *
* @description
- *
* Service that makes an element apply theming related classes to itself.
*
*
+ * // Example component directive that we want to apply theming classes to.
* app.directive('myFancyDirective', function($mdTheming) {
* return {
- * restrict: 'e',
- * link: function(scope, el, attrs) {
- * $mdTheming(el);
+ * restrict: 'AE',
+ * link: function(scope, element, attrs) {
+ * // Initialize the service using our directive's element
+ * $mdTheming(element);
*
* $mdTheming.defineTheme('myTheme', {
* primary: 'blue',
* accent: 'pink',
* dark: true
- * })
+ * });
+ * // Your directive's custom code here.
* }
* };
* });
*
- * @param {element=} element to apply theming to
+ * @param {element=} element Element that will have theming classes applied to it.
*/
/**
@@ -551,7 +601,7 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
* @name $mdTheming#THEMES
* @description
* Property to get all the themes defined
- * @returns {Object} All the themes defined with their properties
+ * @returns {object} All the themes defined with their properties.
*/
/**
@@ -559,7 +609,7 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
* @name $mdTheming#PALETTES
* @description
* Property to get all the palettes defined
- * @returns {Object} All the palettes defined with their colors
+ * @returns {object} All the palettes defined with their colors.
*/
/**
@@ -596,48 +646,42 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
* @ngdoc method
* @name $mdTheming#setBrowserColor
* @description
- * Sets browser header coloring
- * for more info please visit:
- * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color
- *
- * The default color is `800` from `primary` palette of the `default` theme
- *
- * options are:
- * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
- * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',
- * 'accent', 'background' and 'warn'. Default is `primary`
- * `hue` - The hue from the selected palette. Default is `800`
- *
- * @param {Object} options Options object for the browser color
- * @returns {Function} remove function of the browser color
+ * Enables browser header coloring. For more info please visit
+ *
+ * Web Fundamentals.
+ * @param {object=} options Options for the browser color, which include:
+ * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
+ * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`,
+ * `accent`, `background`, and `warn`. Default is `primary`.
+ * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
+ * @returns {function} Function that removes the browser coloring when called.
*/
/**
* @ngdoc method
* @name $mdTheming#defineTheme
* @description
- * Dynamically define a theme by an options object
+ * Dynamically define a theme by using an options object that contains palette names.
*
- * options are:
- * `primary` - The primary palette of the theme.
- * `accent` - The accent palette of the theme.
- * `warn` - The warn palette of the theme.
- * `background` - The background palette of the theme.
- * `dark` - Indicates if it's a dark theme.
- *
- * @param {String} name Theme name to define
- * @param {Object} options Theme definition options
- * @returns {Promise} A resolved promise with the theme name
+ * @param {string} name Theme name to define
+ * @param {object} options Theme definition options
+ * Options are:
+ * - `primary` - `{string}`: The name of the primary palette to use in the theme.
+ * - `accent` - `{string}`: The name of the accent palette to use in the theme.
+ * - `warn` - `{string}`: The name of the warn palette to use in the theme.
+ * - `background` - `{string}`: The name of the background palette to use in the theme.
+ * - `dark` - `{boolean}`: Indicates if it's a dark theme.
+ * @returns {Promise} A resolved promise with the new theme name.
*/
/* @ngInject */
function ThemingService($rootScope, $mdUtil, $q, $log) {
- // Allow us to be invoked via a linking function signature.
+ // Allow us to be invoked via a linking function signature.
var applyTheme = function (scope, el) {
- if (el === undefined) { el = scope; scope = undefined; }
- if (scope === undefined) { scope = $rootScope; }
- applyTheme.inherit(el, el);
- };
+ if (el === undefined) { el = scope; scope = undefined; }
+ if (scope === undefined) { scope = $rootScope; }
+ applyTheme.inherit(el, el);
+ };
Object.defineProperty(applyTheme, 'THEMES', {
get: function () {