Angular material 3 disabled button is transparent

I have a custom class that overrides tokens of the material button.

.primary-button {
button, a {
@include mat.button-overrides(
(
container-color: transparent,
label-text-color: mat.get-theme-color(themes.$inspaces-theme, secondary-fixed-dim),
outline-color: mat.get-theme-color(themes.$inspaces-theme, secondary-fixed-dim),
// disabled-outline-color: mat.get-theme-color(themes.$inspaces-theme, secondary-fixed-dim),
// disabled-label-text-color: mat.get-theme-color(themes.$inspaces-theme, secondary-fixed-dim),
)
);
}
}


I am applying the class on a div element that wraps the button

<div class="primary-button mt-1">
<button [disabled]="form.invalid" (click)="submit()" mat-stroked-button>
<mat-icon>send</mat-icon>
Send
</button>
</div>


The issue I have is that the button element is not visible when the disabled attribute is set. Inspecting the button styles shows that the outline of the button is being set to transparent causing the button to be invisible.

Styles being applied to the button

.mat-mdc-outlined-button[disabled], .mat-mdc-outlined-button.mat-mdc-button-disabled{
cursor: default;
pointer-events: none;
color: var(--mdc-outlined-button-disabled-label-text-color);
border-color: var(--mdc-outlined-button-disabled-outline-color);
}


m3-theme

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
use-system-variables: true,
),
typography: (
use-system-variables: true,
brand-family: "Noto Sans"
),
));

$inspaces-theme: m3-theme.$light-theme;


theming

:root {
@include mat.core-theme(themes.$inspaces-theme);
@include mat.button-theme(themes.$inspaces-theme);

@include mat.system-level-colors(themes.$inspaces-theme);


}


Why is the button's border color and label text color being set to transparent when the button is disabled, what am I missing? Overriding the tokens for the border and label color for the disabled state works, see below

...
disabled-outline-color: mat.get-theme-color(themes.$inspaces-theme, secondary-fixed-dim) // has value : color-mix(in srgb, var(--sys-on-surface) 12%, transparent),
disabled-label-text-color: mat.get-theme-color(themes.$inspaces-theme, secondary-fixed-dim) //has value: color-mix(in srgb, var(--sys-on-surface) 38%, transparent),
...


This happens also with disabled buttons outside the class .primary-button

Continue reading...