From e33c8b1d4f9c27cb3ad486f96d98617afbb64552 Mon Sep 17 00:00:00 2001 From: Daniel Kimmich Date: Wed, 25 Oct 2023 18:19:34 +0200 Subject: [PATCH] fix: maximize contrast of dark texts on light backgrounds --- projects/material-css-vars/src/lib/_variables.scss | 2 ++ .../src/lib/material-css-vars.service.ts | 4 ++-- projects/material-css-vars/src/test/integration.spec.ts | 8 ++------ 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/projects/material-css-vars/src/lib/_variables.scss b/projects/material-css-vars/src/lib/_variables.scss index aefd69a..1ee9822 100644 --- 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 index fc2a190..04bfcdd 100644 --- 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 index a5a7028..d48b1f3 100644 --- a/projects/material-css-vars/src/test/integration.spec.ts +++ b/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)"); }); });