From dd5b9549f4241eadacb4fe92db574b1bcd9771d5 Mon Sep 17 00:00:00 2001 From: Ryan Schmukler Date: Wed, 21 Jan 2015 21:32:41 -0500 Subject: [PATCH] feat(theming): fix strong light colors vs normal light colors, as per spec --- src/core/services/theming/theme.palette.js | 48 ++++++++++++++-------- src/core/services/theming/theming.js | 31 ++++++++++---- src/core/services/theming/theming.spec.js | 11 ++++- 3 files changed, 65 insertions(+), 25 deletions(-) diff --git a/src/core/services/theming/theme.palette.js b/src/core/services/theming/theme.palette.js index 0c0f9ccd3e9..4d16a82a4cb 100644 --- a/src/core/services/theming/theme.palette.js +++ b/src/core/services/theming/theme.palette.js @@ -19,7 +19,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#ff1744', 'A700': '#d50000', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '50 100 200 300 400 A100' + 'contrastDarkColors': '50 100 200 300 400 A100', + 'contrastStrongLightColors': '500 600 700 A200 A400 A700' }, 'pink': { '50': '#fce4ec', @@ -37,7 +38,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#f50057', 'A700': '#c51162', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '50 100 200 300 400 A100' + 'contrastDarkColors': '50 100 200 300 400 A100', + 'contrastStrongLightColors': '500 600 A200 A400 A700' }, 'purple': { '50': '#f3e5f5', @@ -55,7 +57,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#d500f9', 'A700': '#aa00ff', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '50 100 200 A100' + 'contrastDarkColors': '50 100 200 A100', + 'contrastStrongLightColors': '300 400 A200 A400 A700' }, 'deep-purple': { '50': '#ede7f6', @@ -73,7 +76,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#651fff', 'A700': '#6200ea', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '50 100 200 A100' + 'contrastDarkColors': '50 100 200 A100', + 'contrastStrongLightColors': '300 400 A200' }, 'indigo': { '50': '#e8eaf6', @@ -91,7 +95,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#3d5afe', 'A700': '#304ffe', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '50 100 200 A100' + 'contrastDarkColors': '50 100 200 A100', + 'contrastStrongLightColors': '300 400 A200 A400' }, 'blue': { '50': '#e3f2fd', @@ -109,7 +114,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#2979ff', 'A700': '#2962ff', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '100 200 300 400 A100' + 'contrastDarkColors': '100 200 300 400 A100', + 'contrastStrongLightColors': '500 600 700 A200 A400 A700' }, 'light-blue': { '50': '#e1f5fe', @@ -127,7 +133,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#00b0ff', 'A700': '#0091ea', 'contrastDefaultColor': 'dark', - 'contrastLightColors': '500 600 700 800 900 A700' + 'contrastLightColors': '500 600 700 800 900 A700', + 'contrastStrongLightColors': '500 600 700 800 A700' }, 'cyan': { '50': '#e0f7fa', @@ -145,7 +152,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#00e5ff', 'A700': '#00b8d4', 'contrastDefaultColor': 'dark', - 'contrastLightColors': '500 600 700 800 900' + 'contrastLightColors': '500 600 700 800 900', + 'contrastStrongLightColors': '500 600 700 800' }, 'teal': { '50': '#e0f2f1', @@ -163,7 +171,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#1de9b6', 'A700': '#00bfa5', 'contrastDefaultColor': 'dark', - 'contrastLightColors': '500 600 700 800 900' + 'contrastLightColors': '500 600 700 800 900', + 'contrastStrongLightColors': '500 600 700' }, 'green': { '50': '#e8f5e9', @@ -181,7 +190,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#00e676', 'A700': '#00c853', 'contrastDefaultColor': 'dark', - 'contrastLightColors': '500 600 700 800 900' + 'contrastLightColors': '500 600 700 800 900', + 'contrastStrongLightColors': '500 600 700' }, 'light-green': { '50': '#f1f8e9', @@ -199,7 +209,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#76ff03', 'A700': '#64dd17', 'contrastDefaultColor': 'dark', - 'contrastLightColors': '800 900' + 'contrastLightColors': '800 900', + 'contrastStrongLightColors': '800 900' }, 'lime': { '50': '#f9fbe7', @@ -217,7 +228,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#c6ff00', 'A700': '#aeea00', 'contrastDefaultColor': 'dark', - 'contrastLightColors': '900' + 'contrastLightColors': '900', + 'contrastStrongLightColors': '900' }, 'yellow': { '50': '#fffde7', @@ -269,7 +281,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#ff9100', 'A700': '#ff6d00', 'contrastDefaultColor': 'dark', - 'contrastLightColors': '800 900' + 'contrastLightColors': '800 900', + 'contrastStrongLightColors': '800 900' }, 'deep-orange': { '50': '#fbe9e7', @@ -287,7 +300,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#ff3d00', 'A700': '#dd2c00', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '50 100 200 300 400 A100 A200' + 'contrastDarkColors': '50 100 200 300 400 A100 A200', + 'contrastStrongLightColors': '500 600 700 800 900 A400 A700' }, 'brown': { '50': '#efebe9', @@ -305,7 +319,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#8d6e63', 'A700': '#5d4037', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '50 100 200' + 'contrastDarkColors': '50 100 200', + 'contrastStrongLightColors': '300 400' }, 'grey': { '0': '#ffffff', @@ -343,7 +358,8 @@ angular.module('material.core.theming.palette', []) 'A400': '#78909c', 'A700': '#455a64', 'contrastDefaultColor': 'light', - 'contrastDarkColors': '50 100 200 300' + 'contrastDarkColors': '50 100 200 300', + 'contrastStrongLightColors': '400 500' } }); })(); diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js index a7d6c43b8a7..0fef504ed60 100644 --- a/src/core/services/theming/theming.js +++ b/src/core/services/theming/theming.js @@ -53,7 +53,8 @@ var DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)'; var LIGHT_SHADOW = ''; var DARK_CONTRAST_COLOR = colorToRgbaArray('rgba(0,0,0,0.87)'); -var LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgb(255,255,255)'); +var LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgba(255,255,255,0.87'); +var STRONG_LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgb(255,255,255)'); var THEME_COLOR_TYPES = ['primary', 'accent', 'warn', 'background']; var DEFAULT_COLOR_TYPE = 'primary'; @@ -454,15 +455,18 @@ function generateThemes($injector) { function sanitizePalette(palette) { var defaultContrast = palette.contrastDefaultColor; var lightColors = palette.contrastLightColors || []; + var strongLightColors = palette.contrastStrongLightColors || []; var darkColors = palette.contrastDarkColors || []; // These colors are provided as space-separated lists if (typeof lightColors === 'string') lightColors = lightColors.split(' '); + if (typeof strongLongColors === 'string') strongLightColors = strongLightColors.split(' '); if (typeof darkColors === 'string') darkColors = darkColors.split(' '); // Cleanup after ourselves delete palette.contrastDefaultColor; delete palette.contrastLightColors; + delete palette.contrastStrongLightColors; delete palette.contrastDarkColors; // Change { 'A100': '#fffeee' } to { 'A100': { value: '#fffeee', contrast:DARK_CONTRAST_COLOR } @@ -483,9 +487,19 @@ function generateThemes($injector) { }; function getContrastColor() { if (defaultContrast === 'light') { - return darkColors.indexOf(hueName) > -1 ? DARK_CONTRAST_COLOR : LIGHT_CONTRAST_COLOR; + if (darkColors.indexOf(hueName) > -1) { + return DARK_CONTRAST_COLOR; + } else { + return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR + : LIGHT_CONTRAST_COLOR; + } } else { - return lightColors.indexOf(hueName) > -1 ? LIGHT_CONTRAST_COLOR : DARK_CONTRAST_COLOR; + if (lightColors.indexOf(hueName) > -1) { + return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR + : LIGHT_CONTRAST_COLOR; + } else { + return DARK_CONTRAST_COLOR; + } } } }); @@ -508,8 +522,8 @@ function checkValidPalette(theme, colorType) { function colorToRgbaArray(clr) { if (angular.isArray(clr) && clr.length == 3) return clr; if (/^rgb/.test(clr)) { - return clr.replace(/(^\s*rgba?\(|\)\s*$)/g, '').split(',').map(function(value) { - return parseInt(value, 10); + return clr.replace(/(^\s*rgba?\(|\)\s*$)/g, '').split(',').map(function(value, i) { + return i == 3 ? parseFloat(value, 10) : parseInt(value, 10); }); } if (clr.charAt(0) == '#') clr = clr.substring(1); @@ -528,8 +542,11 @@ function colorToRgbaArray(clr) { } function rgba(rgbArray, opacity) { - if (rgbArray.length == 4) opacity = rgbArray.pop(); - return opacity && opacity.length ? + if (rgbArray.length == 4) { + rgbArray = angular.copy(rgbArray); + opacity = rgbArray.pop(); + } + return opacity && (typeof opacity == 'number' || (typeof opacity == 'string' && opacity.length)) ? 'rgba(' + rgbArray.join(',') + ',' + opacity + ')' : 'rgb(' + rgbArray.join(',') + ')'; } diff --git a/src/core/services/theming/theming.spec.js b/src/core/services/theming/theming.spec.js index 95f525fab2b..7e7dccc47b3 100644 --- a/src/core/services/theming/theming.spec.js +++ b/src/core/services/theming/theming.spec.js @@ -25,7 +25,8 @@ describe('$mdThemingProvider', function() { 'A400': 'ff1744', 'A700': 'd50000', 'contrastDefaultColor': 'light', - 'contrastDarkColors': ['50', '100', '200', '300', '400', 'A100'] + 'contrastDarkColors': ['50', '100', '200', '300', '400', 'A100'], + 'contrastStrongLightColors': ['900'] }; defaultTheme = themingProvider.theme('default') .primaryPalette('testPalette') @@ -208,11 +209,17 @@ describe('$mdThemingProvider', function() { 'default': '50' }); expect(parse('.md-THEME_NAME-theme { color: "{{primary-contrast}}"; } ')[0].content) - .toEqual('color: rgb(0,0,0);'); + .toEqual('color: rgba(0,0,0,0.87);'); testTheme.primaryPalette('testPalette', { 'default': '800' }); + expect(parse('{ color: "{{primary-contrast}}"; }')[0].content) + .toEqual('color: rgba(255,255,255,0.87);'); + + testTheme.primaryPalette('testPalette', { + 'default': '900' + }); expect(parse('{ color: "{{primary-contrast}}"; }')[0].content) .toEqual('color: rgb(255,255,255);'); });