Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
feat(theming): fix strong light colors vs normal light colors, as per…
Browse files Browse the repository at this point in the history 
… spec
  • Loading branch information
@rschmukler
rschmukler committed Jan 22, 2015
1 parent 0e0846f commit dd5b954
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 25 deletions.
48 changes: 32 additions & 16 deletions src/core/services/theming/theme.palette.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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'
}
});
})();
31 changes: 24 additions & 7 deletions src/core/services/theming/theming.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 }
Expand All @@ -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;
}
}
}
});
Expand All @@ -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);
Expand All @@ -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(',') + ')';
}
Expand Down
11 changes: 9 additions & 2 deletions src/core/services/theming/theming.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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);');
});
Expand Down

0 comments on commit dd5b954

Please sign in to comment.