feat(theme): add contrast opacity values for all color types and hues #11376

Splaktar · 2018-07-20T11:18:27Z

PR Checklist

Please check that your PR fulfills the following requirements:

The commit message follows our guidelines
Tests for the changes have been added or this is not a bug fix / enhancement
Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number:
N/A

What is the new behavior?

Add opacity keyword support (secondary, icon, disabled, hint, divider)
Deprecate documentation of foreground-* in favor of background-default-contrast-*
Allow foregroundPalette to override colors on default background and hues of equal contrast type

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

This is based on @clshortfuse's PR #8872.

googlebot · 2018-07-20T11:18:29Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

Splaktar · 2018-07-20T11:34:26Z

TODO

Test basic features of md-colors
Test dark modes
Test demos of all components
Test if this fixes bug(input): placeholder text inside toolbar is difficult to read #7987
Look into dark mode issues with tab demos
Look into dark mode issues with button demos
Look into dark mode issues with bottom sheet demos
Look into dark mode issues with whiteframes (in whiteframe and custom chips demos)

Opened #11458 to track adding support for contrast parameter in md-colors.

Fixes #7987. Relates to #11376.

Splaktar · 2018-07-20T23:23:34Z

This PR alone doesn't fix #7987 but I've addressed that fix in PR #11378 which is layered on top of this branch.

Splaktar · 2018-07-22T08:16:11Z

PR #11380 open for Bottom Sheet dark theme issues.

Splaktar · 2018-07-22T09:32:54Z

Opened PR #11381 to address the various dark mode demo issues which don't appear to be related to this PR at all.

clshortfuse · 2018-07-24T16:22:16Z

Looking good.

I don't have the time to review all these changes, but good to see my work not going to waste.

## PR Checklist Please check that your PR fulfills the following requirements: - [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format) - [x] Tests for the changes have been added or this is not a bug fix / enhancement - [x] Docs have been added, updated, or were not required ## PR Type What kind of change does this PR introduce?  ``` [ ] Bugfix [ ] Enhancement [x] Documentation content changes [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Infrastructure changes [ ] Other... Please describe: ``` ## What is the current behavior? Button, chips, whiteframe, and tabs demos are significantly broken in dark mode. This makes testing theme or component changes in dark mode more difficult.  Issue Number: Relates to #11376 ## What is the new behavior? - better support for dark mode in docs and demos - style anchors to be more readable in dark mode - fix site-toolbar in dark mode and remove unused styles - fix supported browsers table in dark mode - fix button, chips, tabs, whiteframe demos in dark mode ## Does this PR introduce a breaking change? ``` [ ] Yes [x] No ```   ## Other information

Fixes #7987. Relates to #11376.

Splaktar · 2020-06-30T01:01:43Z

Rebased, squashed, and updated.

TODO:

Review how this could break existing apps and provide a BREAKING CHANGE: note in commit message if necessary
Determine if the Theming Guides need updates after these changes and whether that should be done in a separate PR

jelbourn

LGTM

Add opacity keyword support (`secondary`, `icon`, `disabled`, `hint`, `divider`) Deprecate documentation of `foreground-*` in favor of `background-default-contrast-*` Allow `foregroundPallete` to override colors on default background and hues of equal contrast type

src/core/services/theming/theming.js

Splaktar · 2020-06-30T23:52:30Z

I don't believe that the changes to the internal mini-DSL for defining theme files in components should cause any breakages to apps built with the library.

There may be some impacts to angular/material-tools and we'll likely need to do a new release for it when we ship 1.2.0. This is tracked in angular/material-tools#46.

…lint issues - fix lint warning of unnecessary escape in regex and missing colon - resolve test failures after merge - `md-colors` demos general cleanup and fix URLs and icons - clarify how to map the old foreground expressions in theming docs - update links to opacity requirements for icons - clean up Theming implementation guide

Fixes #7987. Relates to #11376.

googlebot added the cla: no PR author needs to sign Google's CLA: https://opensource.google.com/docs/cla/ label Jul 20, 2018

Splaktar self-assigned this Jul 20, 2018

Splaktar added this to the 1.1.11 milestone Jul 20, 2018

Splaktar mentioned this pull request Jul 20, 2018

feat(theme): add contrast opacity values for all color types and hues #8872

Closed

Splaktar added a commit that referenced this pull request Jul 20, 2018

fix(toolbar): input placeholders and ink need more contrast

b5cb673

Fixes #7987. Relates to #11376.

Splaktar mentioned this pull request Jul 20, 2018

fix(toolbar): input placeholders and ink need more contrast #11378

Merged

3 tasks

Splaktar added in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs and removed needs: manual testing This issue or PR needs to have some manual testing and verification done labels Jul 20, 2018

Splaktar mentioned this pull request Jul 22, 2018

docs: better support for dark mode in docs and demos #11381

Merged

3 tasks

Splaktar mentioned this pull request Sep 25, 2018

colors: add support for contrast parameter #11458

Open

Splaktar force-pushed the mdTheme-contrastOpacities branch from a04cdd2 to 1484552 Compare September 25, 2018 23:08

Splaktar added type: enhancement pr: merge ready This PR is ready for a caretaker to review and removed in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs labels Sep 25, 2018

Splaktar assigned jelbourn Sep 26, 2018

Splaktar added the pr: presubmit-failures label Oct 2, 2018

Splaktar unassigned josephperrott Oct 20, 2018

Splaktar modified the milestones: 1.1.11, 1.2.0 Oct 20, 2018

Splaktar removed the pr: merge ready This PR is ready for a caretaker to review label Oct 20, 2018

Splaktar force-pushed the mdTheme-contrastOpacities branch from 75b4b37 to 0fbf631 Compare August 26, 2019 16:55

clshortfuse mentioned this pull request Aug 26, 2019

fix(menu): support dark themes and non-grey backgrounds #9212

Closed

Splaktar force-pushed the mdTheme-contrastOpacities branch from 0fbf631 to 90773f0 Compare August 26, 2019 16:59

Splaktar mentioned this pull request Aug 26, 2019

menu: assigning a color to backgroundPalette renders menu unreadable #9100

Closed

Splaktar added a commit that referenced this pull request Aug 26, 2019

fix(toolbar): input placeholders and ink need more contrast

67a8034

Fixes #7987. Relates to #11376.

Splaktar added pr: merge ready This PR is ready for a caretaker to review and removed pr: presubmit-failures labels Jun 30, 2020

Splaktar requested a review from mmalerba June 30, 2020 00:46

Splaktar force-pushed the mdTheme-contrastOpacities branch from 90773f0 to a3cf860 Compare June 30, 2020 00:59

jelbourn approved these changes Jun 30, 2020

View reviewed changes

Splaktar force-pushed the mdTheme-contrastOpacities branch from a3cf860 to b294cf0 Compare June 30, 2020 23:07

Splaktar removed the request for review from mmalerba June 30, 2020 23:07

Splaktar force-pushed the mdTheme-contrastOpacities branch 2 times, most recently from 3b85682 to a9a8eca Compare June 30, 2020 23:37

Splaktar removed the - Breaking Change label Jun 30, 2020

clshortfuse reviewed Jun 30, 2020

View reviewed changes

src/core/services/theming/theming.js Outdated Show resolved Hide resolved

Splaktar mentioned this pull request Jun 30, 2020

Adjustments for theming changes in AngularJS Material 1.2.0 angular/material-tools#46

Closed

Splaktar force-pushed the mdTheme-contrastOpacities branch from a9a8eca to a03aa2a Compare June 30, 2020 23:57

Splaktar merged commit 01917b3 into master Jul 1, 2020

Splaktar deleted the mdTheme-contrastOpacities branch July 1, 2020 00:14

Splaktar added a commit that referenced this pull request Jul 1, 2020

fix(toolbar): input placeholders and ink need more contrast

fe260da

Fixes #7987. Relates to #11376.

Splaktar added a commit that referenced this pull request Jul 1, 2020

fix(toolbar): input placeholders and ink need more contrast

a82fc93

Fixes #7987. Relates to #11376.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(theme): add contrast opacity values for all color types and hues #11376

feat(theme): add contrast opacity values for all color types and hues #11376

Uh oh!

Splaktar commented Jul 20, 2018 •

edited

Loading

Uh oh!

googlebot commented Jul 20, 2018

Uh oh!

Splaktar commented Jul 20, 2018 •

edited

Loading

Uh oh!

Splaktar commented Jul 20, 2018

Uh oh!

Splaktar commented Jul 22, 2018

Uh oh!

Splaktar commented Jul 22, 2018

Uh oh!

clshortfuse commented Jul 24, 2018

Uh oh!

Splaktar commented Jun 30, 2020 •

edited

Loading

Uh oh!

jelbourn left a comment

Uh oh!

Uh oh!

Splaktar commented Jun 30, 2020

Uh oh!

Uh oh!

feat(theme): add contrast opacity values for all color types and hues #11376

feat(theme): add contrast opacity values for all color types and hues #11376

Uh oh!

Conversation

Splaktar commented Jul 20, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

googlebot commented Jul 20, 2018

Uh oh!

Splaktar commented Jul 20, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Splaktar commented Jul 20, 2018

Uh oh!

Splaktar commented Jul 22, 2018

Uh oh!

Splaktar commented Jul 22, 2018

Uh oh!

clshortfuse commented Jul 24, 2018

Uh oh!

Splaktar commented Jun 30, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Splaktar commented Jun 30, 2020

Uh oh!

Uh oh!

Splaktar commented Jul 20, 2018 •

edited

Loading

Splaktar commented Jul 20, 2018 •

edited

Loading

Splaktar commented Jun 30, 2020 •

edited

Loading