Skip to content

fix(material/button): use system colors for state layers and text #31278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 4, 2025
Merged

fix(material/button): use system colors for state layers and text #31278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 37 additions & 31 deletions src/material/button/_m2-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,55 +52,56 @@
button-filled-container-color: map.get($system, surface),
button-filled-disabled-container-color: $disabled-container,
button-filled-disabled-label-text-color: $disabled,
button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-filled-disabled-state-layer-color: map.get($system, on-surface-variant),
button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-filled-label-text-color: map.get($system, on-surface),
button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-filled-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
button-filled-state-layer-color: map.get($system, on-surface),
button-outlined-disabled-label-text-color: $disabled,
button-outlined-disabled-outline-color: $outline,
button-outlined-disabled-state-layer-color:
inspection.get-theme-color($theme, foreground, base),
button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-outlined-label-text-color: map.get($system, on-surface),
button-outlined-outline-color: $outline,
button-outlined-pressed-state-layer-opacity:
map.get($system, pressed-state-layer-opacity),
button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
button-outlined-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
button-outlined-state-layer-color: map.get($system, on-surface),
button-protected-container-color: map.get($system, surface),
button-protected-disabled-container-color: $disabled-container,
button-protected-disabled-label-text-color: $disabled,
button-protected-disabled-state-layer-color:
inspection.get-theme-color($theme, foreground, base),
button-protected-disabled-state-layer-color: map.get($system, on-surface-variant),
button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-protected-pressed-state-layer-opacity:
map.get($system, pressed-state-layer-opacity),
button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-protected-label-text-color: map.get($system, on-surface),
button-protected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
button-protected-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
button-protected-state-layer-color: map.get($system, on-surface),
button-text-disabled-label-text-color: $disabled,
button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-text-disabled-state-layer-color: map.get($system, on-surface-variant),
button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-text-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-text-label-text-color: map.get($system, on-surface),
button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-text-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
button-text-state-layer-color: map.get($system, on-surface),
button-tonal-container-color: map.get($system, surface),
button-tonal-disabled-container-color: $disabled-container,
button-tonal-disabled-label-text-color: $disabled,
button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-tonal-disabled-state-layer-color: map.get($system, on-surface-variant),
button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-tonal-label-text-color: map.get($system, on-surface),
button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-tonal-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
button-tonal-state-layer-color: map.get($system, on-surface),
);
}

Expand All @@ -116,22 +117,27 @@
@return (
button-filled-container-color: map.get($system, primary),
button-filled-label-text-color: map.get($system, on-primary),
button-filled-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
button-filled-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
button-filled-state-layer-color: map.get($system, on-primary),
button-outlined-label-text-color: map.get($system, primary),
button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color),
button-outlined-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
button-outlined-ripple-color: m3-utils.color-with-opacity(
map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
button-outlined-state-layer-color: map.get($system, primary),
button-protected-container-color: map.get($system, primary),
button-protected-label-text-color: map.get($system, on-primary),
button-protected-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
button-protected-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
button-protected-state-layer-color: map.get($system, on-primary),
button-text-label-text-color: map.get($system, primary),
button-text-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
button-text-ripple-color: m3-utils.color-with-opacity(
map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
button-text-state-layer-color: map.get($system, primary),
button-tonal-container-color: map.get($system, primary),
button-tonal-label-text-color: map.get($system, on-primary),
button-tonal-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
button-tonal-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
button-tonal-state-layer-color: map.get($system, on-primary),
);
}
Expand Down
24 changes: 14 additions & 10 deletions src/material/button/_m2-fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,25 @@
fab-container-color: map.get($system, surface),
fab-disabled-state-container-color: $disabled-container,
fab-disabled-state-foreground-color: $disabled,
fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
fab-disabled-state-layer-color: map.get($system, on-surface-variant),
fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
fab-foreground-color: map.get($system, on-surface),
fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
fab-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
fab-small-container-color: map.get($system, surface),
fab-small-disabled-state-container-color: $disabled-container,
fab-small-disabled-state-foreground-color: $disabled,
fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
fab-small-disabled-state-layer-color: map.get($system, on-surface-variant),
fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),
fab-small-foreground-color: map.get($system, on-surface),
fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
fab-small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
fab-small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
fab-state-layer-color: inspection.get-theme-color($theme, foreground, base),
fab-small-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
fab-small-state-layer-color: map.get($system, on-surface),
fab-state-layer-color: map.get($system, on-surface),
);
}

Expand All @@ -67,10 +69,12 @@
@return (
fab-container-color: map.get($system, primary),
fab-foreground-color: map.get($system, on-primary),
fab-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
fab-ripple-color: m3-utils.color-with-opacity(
map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
fab-small-container-color: map.get($system, primary),
fab-small-foreground-color: map.get($system, on-primary),
fab-small-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
fab-small-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
fab-small-state-layer-color: map.get($system, on-primary),
fab-state-layer-color: map.get($system, on-primary),
);
Expand Down
12 changes: 7 additions & 5 deletions src/material/button/_m2-icon-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@
$is-dark: inspection.get-theme-type($theme) == dark;

@return (
icon-button-disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
icon-button-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
icon-button-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
icon-button-disabled-state-layer-color: map.get($system, on-surface-variant),
icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
icon-button-icon-color: inherit,
icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
icon-button-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
icon-button-state-layer-color: inspection.get-theme-color($theme, foreground, base),
icon-button-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
icon-button-state-layer-color: map.get($system, on-surface),
);
}

Expand All @@ -38,7 +39,8 @@
@return (
icon-button-icon-color: map.get($system, primary),
icon-button-state-layer-color: map.get($system, primary),
icon-button-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
icon-button-ripple-color: m3-utils.color-with-opacity(
map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
);
}

Expand Down
Loading