fix(material/divider): non-text color contrast issues (#28995)

* 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 * fix(material/divider): fixed demo list border color fixed border list demo color to match divider color fixes b/291964002
angular · Jun 6, 2024 · 566057b · 566057b
1 parent faf82b1
commit 566057b
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
diff --git 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;
   }

diff --git 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
@@ -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
@@ -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
@@ -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),
     ),
   );