fix: maximize contrast of dark texts on light backgrounds (#150)

Author: json-derulo

projects/material-css-vars/src/lib/_variables.scss

@@ -44,6 +44,8 @@ $text: (
   --light-disabled-text: rgba(var(--light-disabled-text-no-rgb)),
   --light-dividers: rgba(var(--light-dividers-no-rgb)),
   --light-focused: rgba(var(--light-focused-no-rgb)),
+  --dark-text-contrast: #000000,
+  --light-text-contrast: var(--light-primary-text),
 ) !default;
 
 $default-light-theme: (

projects/material-css-vars/src/lib/material-css-vars.service.ts

@@ -35,8 +35,8 @@ interface Color {
 })
 export class MaterialCssVarsService {
   private static CONTRAST_PREFIX = "contrast-";
-  private static DARK_TEXT_VAR = "--dark-primary-text";
-  private static LIGHT_TEXT_VAR = "--light-primary-text";
+  private static DARK_TEXT_VAR = "--dark-text-contrast";
+  private static LIGHT_TEXT_VAR = "--light-text-contrast";
   // This should be readonly from the outside
   cfg: MaterialCssVariablesConfig;
   primary = "#03a9f4";

projects/material-css-vars/src/test/integration.spec.ts

@@ -60,9 +60,7 @@ describe("integration", () => {
           button.color = "primary";
           fixture.detectChanges();
 
-          expect(getButtonComputedStyle(fixture).color).toEqual(
-            "rgba(0, 0, 0, 0.87)",
-          );
+          expect(getButtonComputedStyle(fixture).color).toEqual("rgb(0, 0, 0)");
         });
 
         it("should render a button in the given accent color", () => {
@@ -96,9 +94,7 @@ describe("integration", () => {
           button.color = "warn";
           fixture.detectChanges();
 
-          expect(getButtonComputedStyle(fixture).color).toEqual(
-            "rgba(0, 0, 0, 0.87)",
-          );
+          expect(getButtonComputedStyle(fixture).color).toEqual("rgb(0, 0, 0)");
         });
       });