Open blogcraft opened 1 month ago
Should be resolved by https://github.com/angular/components/pull/29433.
Just updated to 18.1.1 and the inconsistency remains exactly the same.
What does your markup look like? You might also have to add the same color
attribute on both of the buttons.
I am not using the color attribute. I'm using the m3 theme without the color-variants-backwards-compatibility.
<mat-toolbar class="header">
<mat-toolbar-row class="mat-elevation-z6 sticky-top">
<button mat-icon-button (click)="onMenuClick()" matTooltip="Menú">
<fa-icon
[icon]="faBars"
class="inline-flex text-lg align-top"
[fixedWidth]="true" />
</button>
<button
mat-button
[matMenuTriggerFor]="menuUsuario"
matTooltip="{{ nombreUsuario | titlecase }}">
<fa-icon
matMenuItemIcon
[icon]="faCircleUser"
[fixedWidth]="true"
class="text-xl align-middle" />{{ nombreUsuario | titlecase }}
</button>
<button mat-icon-button [matMenuTriggerFor]="theme" matTooltip="Tema">
<fa-icon
[icon]="faPaintBrush"
class="inline-flex text-lg align-top"
[fixedWidth]="true" />
</button>
</mat-toolbar-row>
</mat-toolbar>
And my styles.scss
@use "@angular/material" as mat;
@use "sass:map";
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
@import "./themes/m3-theme.scss";
@include mat.core();
@mixin app-theme($theme) {
@include mat.all-component-themes($theme);
@include mat.system-level-colors($theme);
@include mat.system-level-typography($theme);
// @include mat.color-variants-backwards-compatibility($theme);
.accent {
color: mat.get-theme-color($theme, secondary);
}
@include mat.progress-bar-color($theme, $color-variant: tertiary);
@include mat.progress-spinner-color($theme, $color-variant: tertiary);
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background: mat.get-theme-color($theme, outline);
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: mat.get-theme-color($theme, outline-variant);
}
}
html {
.app-light-theme {
@include app-theme($light-theme);
}
.app-dark-theme {
@include app-theme($dark-theme);
}
@media (prefers-color-scheme: light) {
.app-auto-theme {
@include app-theme($light-theme);
}
}
@media (prefers-color-scheme: dark) {
.app-auto-theme {
@include app-theme($dark-theme);
}
}
}
I'd have to look into it more, but I suspect that you'll have to use the color backwards compatibility, because by default icon buttons don't have a color in M3 while regular buttons take the primary color.
Thanks for the response. Is that behaviour by design or just something that will be fixed? Cause our aim is to use the native m3 theme and not use a compatibility layer and avoid having to set the color atribute everywhere.
It's by design in that Material design doesn't support the primary
/accent
/warn
variations in Material 3 anymore. We'll likely maintain support for the backwards-compatibility mixins for a long time though.
In that case shouldn't mat-button also not use by default the primary color if there is no color property?
And if you see in my examples I don't use and don't expect to use de color attribute.
But if I use the these buttons as-is (without color) at least shouldn't they look the same? Including ripple, active, hover, etc?
Is this a regression?
The previous version in which this bug was not present was
No response
Description
I have a Tool Bar with 3 icons, 2 mat-icon-button and one mat-button:![image](https://github.com/user-attachments/assets/9ad39310-acd6-4f84-a5ef-557cb164d97a)
When Hovering, the background color is different and inconsistent.
mat-button hover has a hint of the theme color:
![image](https://github.com/user-attachments/assets/18e900c1-63e3-4190-b0ee-591b0fc6b2b4)
mat-icon-button only has some opacity with a state layer color that ignores the theme.
![image](https://github.com/user-attachments/assets/2143d93f-8e19-4ad1-8f2d-56d4bd01b29b)
Why this inconsistency?
Reproduction
StackBlitz link: Could not make one Steps to reproduce:
Expected Behavior
I expect the same behaviour for both buttons.
Actual Behavior
They have different hover background colors.
Environment