Skip to content

Commit

Permalink
fix(material/divider): non-text color contrast issues (#28995)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
DBowen33 authored Jun 6, 2024
1 parent faf82b1 commit 566057b
Show file tree
Hide file tree
Showing 5 changed files with 5 additions and 5 deletions.
2 changes: 1 addition & 1 deletion src/dev-app/list/list-demo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/material/core/tokens/m3/mat/_divider.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/material/core/tokens/m3/mat/_expansion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion src/material/core/tokens/m3/mat/_stepper.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion src/material/core/tokens/m3/mat/_table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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),
),
);

Expand Down

0 comments on commit 566057b

Please sign in to comment.