fix: maximize contrast of dark texts on light backgrounds

johannesjo · Oct 25, 2023 · b69dff7 · b69dff7
1 parent 6085acc
commit b69dff7
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/projects/material-css-vars/src/lib/_variables.scss b/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: (

diff --git a/projects/material-css-vars/src/lib/material-css-vars.service.ts b/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";

diff --git a/projects/material-css-vars/src/test/integration.spec.ts b/projects/material-css-vars/src/test/integration.spec.ts
@@ -61,7 +61,7 @@ describe("integration", () => {
           fixture.detectChanges();
 
           expect(getButtonComputedStyle(fixture).color).toEqual(
-            "rgba(0, 0, 0, 0.87)",
+            "rgb(0, 0, 0)",
           );
         });
 
@@ -97,7 +97,7 @@ describe("integration", () => {
           fixture.detectChanges();
 
           expect(getButtonComputedStyle(fixture).color).toEqual(
-            "rgba(0, 0, 0, 0.87)",
+            "rgb(0, 0, 0)",
           );
         });
       });