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.
: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);
}