From 2a77bbf6c09cb7a99cf057e995f1debaf64d5d6f Mon Sep 17 00:00:00 2001 From: DBowen33 Date: Thu, 2 May 2024 18:34:48 +0000 Subject: [PATCH 1/2] fix(material/divider): non-text color contrast issues Fixes color contrast issues with non-text elements. Changed from outline-variant to outline colors to pass 3:1 ratio between light/dark mode backgrounds. Fixes b/291964002 --- src/material/core/tokens/m3/mat/_divider.scss | 2 +- src/material/core/tokens/m3/mat/_expansion.scss | 2 +- src/material/core/tokens/m3/mat/_stepper.scss | 2 +- src/material/core/tokens/m3/mat/_table.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/material/core/tokens/m3/mat/_divider.scss b/src/material/core/tokens/m3/mat/_divider.scss index 5b7095e9d74f..afdba7754157 100644 --- a/src/material/core/tokens/m3/mat/_divider.scss +++ b/src/material/core/tokens/m3/mat/_divider.scss @@ -12,7 +12,7 @@ $prefix: (mat, divider); @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( width: token-utils.hardcode(1px, $exclude-hardcoded), - color: map.get($systems, md-sys-color, outline-variant), + color: map.get($systems, md-sys-color, outline), ); @return token-utils.namespace-tokens($prefix, $tokens, $token-slots); diff --git a/src/material/core/tokens/m3/mat/_expansion.scss b/src/material/core/tokens/m3/mat/_expansion.scss index 1db3992d71e8..95efcdd12947 100644 --- a/src/material/core/tokens/m3/mat/_expansion.scss +++ b/src/material/core/tokens/m3/mat/_expansion.scss @@ -20,7 +20,7 @@ $prefix: (mat, expansion); header-indicator-display: token-utils.hardcode(inline-block, $exclude-hardcoded), container-background-color: map.get($systems, md-sys-color, surface), container-text-color: map.get($systems, md-sys-color, on-surface), - actions-divider-color: map.get($systems, md-sys-color, outline-variant), + actions-divider-color: map.get($systems, md-sys-color, outline), header-hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) diff --git a/src/material/core/tokens/m3/mat/_stepper.scss b/src/material/core/tokens/m3/mat/_stepper.scss index ed4fb918cfed..4250a2a7425e 100644 --- a/src/material/core/tokens/m3/mat/_stepper.scss +++ b/src/material/core/tokens/m3/mat/_stepper.scss @@ -14,7 +14,7 @@ $prefix: (mat, stepper); $tokens: ( ( container-color: map.get($systems, md-sys-color, surface), - line-color: map.get($systems, md-sys-color, outline-variant), + line-color: map.get($systems, md-sys-color, outline), header-hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, inverse-surface), $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) diff --git a/src/material/core/tokens/m3/mat/_table.scss b/src/material/core/tokens/m3/mat/_table.scss index d9603df5480b..3b31020ae133 100644 --- a/src/material/core/tokens/m3/mat/_table.scss +++ b/src/material/core/tokens/m3/mat/_table.scss @@ -20,7 +20,7 @@ $prefix: (mat, table); background-color: map.get($systems, md-sys-color, surface), header-headline-color: map.get($systems, md-sys-color, on-surface), row-item-label-text-color: map.get($systems, md-sys-color, on-surface), - row-item-outline-color: map.get($systems, md-sys-color, outline-variant), + row-item-outline-color: map.get($systems, md-sys-color, outline), ), ); From e65e9d90b9305b417676754319521fe71e7b6737 Mon Sep 17 00:00:00 2001 From: DBowen33 Date: Wed, 8 May 2024 16:14:31 +0000 Subject: [PATCH 2/2] fix(material/divider): fixed demo list border color fixed border list demo color to match divider color fixes b/291964002 --- src/dev-app/list/list-demo.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dev-app/list/list-demo.scss b/src/dev-app/list/list-demo.scss index 9d1410c78e1d..7d89469425eb 100644 --- a/src/dev-app/list/list-demo.scss +++ b/src/dev-app/list/list-demo.scss @@ -3,7 +3,7 @@ flex-flow: row wrap; .mat-mdc-list-base { - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid var(--mat-divider-color); width: 350px; margin: 20px 20px 0 0; }