fix(material): 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
angular · May 2, 2024 · 8c001cf · 8c001cf
1 parent 7136c20
commit 8c001cf
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
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),
     ),
   );