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),
  ),
  );