Generate text colors from provided primary/accent/background

[sgomes]

In order to simplify CSS Custom Property-level theming, we should have a utility method that a developer can call to generate all the text colors, using the color contrast algorithm based off of the provided primary, accent and background colors.

mdl.theme.applyTheme(
    document.querySelector(':root'),
    {primary: '#3f51b5', accent: '#ff4081', background: '#fff')
);

resulting in:

:root {
  --mdl-theme-primary: #3f51b5;
  --mdl-theme-accent: #ff4081;
  --mdl-theme-background: #fff;
  --mdl-theme-text-primary-on-primary: white;
  --mdl-theme-text-secondary-on-primary: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-primary-on-accent: white;
  --mdl-theme-text-secondary-on-accent: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
  --mdl-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  --mdl-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  --mdl-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  --mdl-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-primary-on-dark: white;
  --mdl-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
}

[sfdexter]

Superceded by material-components/material-components-web#3