-
Notifications
You must be signed in to change notification settings - Fork 3.4k
feat(theme): add contrast opacity values for all color types and hues #8872
feat(theme): add contrast opacity values for all color types and hues #8872
Conversation
@@ -689,6 +717,45 @@ function generateAllThemes($injector, $mdTheming) { | |||
delete palette.contrastStrongLightColors; | |||
delete palette.contrastDarkColors; | |||
|
|||
function getContrastType(hueName) { | |||
if (defaultContrast === 'light') { | |||
if (darkColors.indexOf(hueName) > -1) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I prefer the !== -1
check for indexOf
calls.
See https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Inequality check is probably faster mathematically than "greater than" check. Updated.
7b2188d
to
46b716f
Compare
} | ||
return 'light'; | ||
} | ||
return 'dark'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can't all of this be merged into one?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure I can refactor it much more:
Current:
if (a) {
if (b) return 3;
if (c) return 2;
return 1;
}
if (d) {
if (c) return 2;
return 1;
}
return 3;
Into this:
if (a) {
if (b) return 3;
if (c) return 2;
return 1;
}
if (!d) return 3;
if (c) return 2;
return 1;
then this:
if (a) {
if (b) return 3;
if (c) return 2;
} else {
if (!d) return 3;
if (c) return 2;
}
return 1;
then this:
if (a) {
if (b) return 3;
} else {
if (!d) return 3;
}
if (c) return 2;
return 1;
finally this:
if (a) {
if (b) return 3;
} else if (!d) {
return 3;
}
if (c) return 2;
return 1;
Edit: One more:
if (a ? b : !d) return 3;
if (c) return 2;
return 1;
I think we need to come up with a better solution for legacy support. Maybe if foregroundPalette isn't user generated set, we should use background-contrast instead |
4946168
to
0f05fb3
Compare
Ugh, apparently it pushed everything i wanted to revert over my old code. Now I'm on the hunt to see how I can undo it. |
0f05fb3
to
7f01138
Compare
Please squash your commits and have a commit message that follows our style guide |
f12e15c
to
4a22b01
Compare
@EladBezalel okay, I've reworked it and added some tests. I don't think there should any possible behavioral change. Stylistically, we'll be fixing incorrect opacities that are no longer part of spec (87% opacity white). |
@@ -16,8 +16,7 @@ angular.module('material.core.theming.palette', []) | |||
'A400': '#ff1744', | |||
'A700': '#d50000', | |||
'contrastDefaultColor': 'light', | |||
'contrastDarkColors': '50 100 200 300 A100', | |||
'contrastStrongLightColors': '400 500 600 700 A200 A400 A700' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why contrastStrongLightColors
? there are colors that the white or black doesn't have 87% opacity.
1c0676d
to
e96e127
Compare
Rebased. Would be nice to have this merged to fix some a11y issues |
Fixed the Travis issue. I'd like to run this through presubmit in the next batch. |
Can you please rebase this? I'll try to do some manual testing and see if we can possibly get this in soon. |
@Splaktar I'll try to do it this weekend. |
Going to close this stale PR and continue in #11376. @clshortfuse can you please comment in #11376 to confirm that it is OK to use your commits? |
Add opacity keyword support (
secondary
,icon
,disabled
,hint
,divider
)Deprecate documentation of
foreground-*
in favor ofbackground-default-contrast-*
Allow
foregroundPallete
to override colors on default background and hues of equal contrast type