Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(theming): dark contrast used incorrectly when only contrastStrong…
Browse files Browse the repository at this point in the history
…LightColors defined

- if `contrastStrongLightColors` is defined and `contrastLightColors` is not,
  `getContrastType()` was incorrectly picking `dark` instead of `strongLight`
- remove all of the duplicate `contrastLightColors` entries that had to remain before,
  due to this bug
- improve JSDoc
- checkbox's checkmark should always match the background color
  and never depend on the contrast of the accent color
- remove duplicate theme style generation for checkbox and button
  • Loading branch information
Splaktar committed Jul 2, 2020
1 parent 3a291ac commit 4e3f7a7
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 40 deletions.
15 changes: 0 additions & 15 deletions src/components/button/button-theme.scss
Expand Up @@ -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}}';
Expand Down
1 change: 0 additions & 1 deletion src/components/button/demoBasicUsage/style.css
Expand Up @@ -13,5 +13,4 @@ section .md-button {
bottom: 5px;
left: 7px;
font-size: 14px;
color: rgba(0, 0, 0, 0.54);
}
15 changes: 1 addition & 14 deletions src/components/checkbox/checkbox-theme.scss
Expand Up @@ -28,7 +28,7 @@ md-checkbox.md-THEME_NAME-theme {
}

&.md-checked .md-icon:after {
border-color: '{{accent-contrast-0.87}}';
border-color: '{{background-default}}';
}

&:not([disabled]) {
Expand Down Expand Up @@ -60,10 +60,6 @@ md-checkbox.md-THEME_NAME-theme {
&.md-checked.md-focused:not([disabled]) .md-container:before {
background-color: '{{warn-color-0.26}}';
}

&.md-checked .md-icon:after {
border-color: '{{background-200}}';
}
}
}

Expand All @@ -76,17 +72,8 @@ md-checkbox.md-THEME_NAME-theme {
background-color: '{{foreground-3}}';
}

&.md-checked .md-icon:after {
border-color: '{{background-200}}';
}

.md-icon:after {
border-color: '{{foreground-3}}';
}

.md-label {
color: '{{foreground-3}}';
}
}

}
11 changes: 2 additions & 9 deletions src/core/services/theming/theme.palette.js
Expand Up @@ -136,7 +136,6 @@ angular.module('material.core.theming.palette', [])
'contrastDefaultColor': 'dark',
// Dark on 700 does not meet the minimum 4.5 contrast ratio (at 4.07),
// but it's worse with a white foreground (3.85).
'contrastLightColors': '800 900 A700',
'contrastStrongLightColors': '800 900 A700'
},
'cyan': {
Expand All @@ -157,7 +156,6 @@ angular.module('material.core.theming.palette', [])
'contrastDefaultColor': 'dark',
// Dark on 700 does not meet the minimum 4.5 contrast ratio (at 4.47),
// but it's worse with a white foreground (3.5).
'contrastLightColors': '800 900',
'contrastStrongLightColors': '800 900'
},
'teal': {
Expand All @@ -180,7 +178,6 @@ angular.module('material.core.theming.palette', [])
// but it's worse with a white foreground (3.67).
// White on 600 does not meet the minimum 4.5 contrast ratio (at 4.31),
// but it's worse with a dark foreground (3.64).
'contrastLightColors': '600 700 800 900',
'contrastStrongLightColors': '600 700 800 900'
},
'green': {
Expand All @@ -201,7 +198,6 @@ angular.module('material.core.theming.palette', [])
'contrastDefaultColor': 'dark',
// White on 700 does not meet the minimum 4.5 contrast ratio (at 4.11),
// but it's worse with a dark foreground (3.81).
'contrastLightColors': '700 800 900',
'contrastStrongLightColors': '700 800 900'
},
'light-green': {
Expand All @@ -220,7 +216,6 @@ angular.module('material.core.theming.palette', [])
'A400': '#76ff03',
'A700': '#64dd17',
'contrastDefaultColor': 'dark',
'contrastLightColors': '800 900',
'contrastStrongLightColors': '800 900'
},
'lime': {
Expand All @@ -239,7 +234,6 @@ angular.module('material.core.theming.palette', [])
'A400': '#c6ff00',
'A700': '#aeea00',
'contrastDefaultColor': 'dark',
'contrastLightColors': '900',
'contrastStrongLightColors': '900'
},
'yellow': {
Expand Down Expand Up @@ -292,7 +286,6 @@ angular.module('material.core.theming.palette', [])
'A400': '#ff9100',
'A700': '#ff6d00',
'contrastDefaultColor': 'dark',
'contrastLightColors': '900',
'contrastStrongLightColors': '900'
},
'deep-orange': {
Expand All @@ -315,7 +308,7 @@ angular.module('material.core.theming.palette', [])
// but it's worse with a white foreground (3.91).
// White on 800 does not meet the minimum 4.5 contrast ratio (at 4.43),
// but it's worse with a dark foreground (3.54).
'contrastLightColors': '800 900 A400 A700',
'contrastStrongLightColors': '800 900 A400 A700',
},
'brown': {
'50': '#efebe9',
Expand Down Expand Up @@ -352,7 +345,7 @@ angular.module('material.core.theming.palette', [])
'A400': '#303030',
'A700': '#616161',
'contrastDefaultColor': 'dark',
'contrastLightColors': '600 700 800 900 A200 A400 A700',
'contrastLightColors': '700 800 900 A200 A400 A700',
'contrastStrongLightColors': '600'
},
'blue-grey': {
Expand Down
21 changes: 20 additions & 1 deletion src/core/services/theming/theming.js
Expand Up @@ -1217,15 +1217,25 @@ function generateAllThemes($injector, $mdTheming) {
delete palette.contrastStrongLightColors;
delete palette.contrastDarkColors;

/**
* @param {string} hueName
* @return {'dark'|'light'|'strongLight'}
*/
function getContrastType(hueName) {
if (defaultContrast === 'light' ? darkColors.indexOf(hueName) !== -1 : lightColors.indexOf(hueName) === -1) {
if (defaultContrast === 'light' ? darkColors.indexOf(hueName) !== -1 :
(lightColors.indexOf(hueName) === -1 && strongLightColors.indexOf(hueName) === -1)) {
return 'dark';
}
if (strongLightColors.indexOf(hueName) !== -1) {
return 'strongLight';
}
return 'light';
}

/**
* @param {'dark'|'light'|'strongLight'} contrastType
* @return {[number, number, number]} [red, green, blue] array
*/
function getContrastColor(contrastType) {
switch (contrastType) {
default:
Expand All @@ -1237,6 +1247,11 @@ function generateAllThemes($injector, $mdTheming) {
return DARK_CONTRAST_COLOR;
}
}

/**
* @param {'dark'|'light'|'strongLight'} contrastType
* @return {{secondary: number, divider: number, hint: number, icon: number, disabled: number}}
*/
function getOpacityValues(contrastType) {
switch (contrastType) {
default:
Expand Down Expand Up @@ -1313,6 +1328,10 @@ function checkValidPalette(theme, colorType) {
}
}

/**
* @param {string} clr rbg or rgba color
* @return {number[]|undefined} [red, green, blue] array if it can be computed
*/
function colorToRgbaArray(clr) {
if (angular.isArray(clr) && clr.length === 3) return clr;
if (/^rgb/.test(clr)) {
Expand Down

0 comments on commit 4e3f7a7

Please sign in to comment.