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

Commit

Permalink
feat(theming): add hue-specific contrast support
Browse files Browse the repository at this point in the history
  • Loading branch information
rschmukler authored and jelbourn committed Aug 13, 2015
1 parent 26dbbf8 commit c4f9f50
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/components/calendar/calendar-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,6 @@
.md-calendar-date:focus.md-calendar-selected-date {
.md-calendar-date-selection-indicator {
background-color: '{{primary-500}}'; // blue-500
color: '{{primary-contrast}}'; // SHOULD BE WHITE (ish)
color: '{{primary-500-contrast}}'; // SHOULD BE WHITE (ish)
}
}
7 changes: 4 additions & 3 deletions src/core/services/theming/theming.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ angular.module('material.core.theming', ['material.core.theming.palette'])
*
* {{primary-100}} - grab shade 100 from the primary palette
* {{primary-100-0.7}} - grab shade 100, apply opacity of 0.7
* {{primary-100-contrast}} - grab shade 100's contrast color
* {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette
* {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-1
* {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue
Expand Down Expand Up @@ -404,13 +405,13 @@ function parseRules(theme, colorType, rules) {
var themeNameRegex = new RegExp('.md-' + theme.name + '-theme', 'g');
// Matches '{{ primary-color }}', etc
var hueRegex = new RegExp('(\'|")?{{\\s*(' + colorType + ')-(color|contrast)-?(\\d\\.?\\d*)?\\s*}}(\"|\')?','g');
var simpleVariableRegex = /'?"?\{\{\s*([a-zA-Z]+)-(A?\d+|hue\-[0-3]|shadow)-?(\d\.?\d*)?\s*\}\}'?"?/g;
var simpleVariableRegex = /'?"?\{\{\s*([a-zA-Z]+)-(A?\d+|hue\-[0-3]|shadow)-?(\d\.?\d*)?(contrast)?\s*\}\}'?"?/g;
var palette = PALETTES[color.name];

// find and replace simple variables where we use a specific hue, not an entire palette
// eg. "{{primary-100}}"
//\(' + THEME_COLOR_TYPES.join('\|') + '\)'
rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, opacity) {
rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, opacity, contrast) {
if (colorType === 'foreground') {
if (hue == 'shadow') {
return theme.foregroundShadow;
Expand All @@ -421,7 +422,7 @@ function parseRules(theme, colorType, rules) {
if (hue.indexOf('hue') === 0) {
hue = theme.colors[colorType].hues[hue];
}
return rgba( (PALETTES[ theme.colors[colorType].name ][hue] || '').value, opacity );
return rgba( (PALETTES[ theme.colors[colorType].name ][hue] || '')[contrast ? 'contrast' : 'value'], opacity );
});

// For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3)
Expand Down

0 comments on commit c4f9f50

Please sign in to comment.