DE21128-broadcast-theme-hooks

[starryeyez024]

• Link(s) to demo pages where this element can be viewed:
  http://localhost:8000/elements/pfe-card/demo/

What has changed and why

• Added support for manual overrides to which theme context is invoked by surface colors. Previously the theme was "locked" into having 3 light theme colors, 2 dark, and 2 saturated. Now the themes can be redefined if desired.
• Added demo file for pfe-card to test.

Testing instructions

Be sure to include detailed instructions on how your update can be tested by another developer.

1. Open the elements/pfe-card/demo/custom-theme.css
2. Change the values of the following variables. Make stuff up, but make the colors match the appropriate theme, like this:

  --pfe-theme--color--surface--lightest: purple;
  --pfe-theme--color--surface--lightest--theme: dark;
  --pfe-theme--color--surface--lighter: maroon;
  --pfe-theme--color--surface--lighter--theme: dark;
  --pfe-theme--color--surface--base: green;
  --pfe-theme--color--surface--base--theme: dark;
  --pfe-theme--color--surface--darker: pink;
  --pfe-theme--color--surface--darker--theme: light;
  --pfe-theme--color--surface--darkest: yellow;
  --pfe-theme--color--surface--darkest--theme: light;
  --pfe-theme--color--surface--complement: hotpink;
  --pfe-theme--color--surface--complement--theme: saturated;
  --pfe-theme--color--surface--accent: #c0ff33;
  --pfe-theme--color--surface--accent--theme: light;

3. The cards should reflect both the color and theme changes.

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Edge
• Internet Explorer 11 (should be useable, not pixel perfect)
• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Firefox 60.7.2 (or latest version for Red Hat Enterprise Linux distribution)
• Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Galaxy S9 Firefox
• iPhone X Safari
• iPad Pro Safari
• Pixel 3 Chrome

Ready-for-merge Checklist

• Expected files: all files in this pull request are related to one feature request or issue (no stragglers)?
• Did browser testing pass?
• Did you update or add any necessary documentation (README.md, WHY.md, etc.)?
• Was this feature demo'd and the design review approved?
• Did you update the CHANGELOG.md file with a summary of this update?

[castastrophe]

Looks great! Just needs a changelog

[starryeyez024]

@castastrophe added!

[kylebuch8]

Lady Gaga... Thy Manners!!!