Foreground and background palettes provide theme colors for interface surfaces and content, including the colors used when controls are disabled. Angular Material supplies shared light and dark theme palettes for these purposes. section 28.3.2
Use the palettes to style disabled custom buttons:
- Read the light theme palettes into SCSS variables such as $bg and $fg. section 28.3.2
- Get the disabled-button color from the background palette for background-color. section 28.3.2
- Get the disabled-button color from the foreground palette for the button text color. section 28.3.2
- Match both disabled native buttons and custom elements disabled through the host element. section 28.3.2
Disabled themed custom button
A custom button SCSS rule can call get-color-from-palette($bg, disabled-button) for its background and get-color-from-palette($fg, disabled-button) for its foreground. The :host selector supports Angular view encapsulation when the customButton element receives disabled. section 28.3.2
Listing 28.19. The customButton.component.scss file in the src/app/core folder
@use "@angular/material" as material;
$primary: material.define-palette(material.$indigo-palette);
$accent: material.define-palette(material.$pink-palette, A200, A100, A400);
$warn: material.define-palette(material.$red-palette);
$typography: material.define-typography-config();
button[class*="custom-button-"] {
padding: 7px 12px;
border: none;
border-radius: 4px;
margin: 2px;
}
button.custom-button {
@each $name, $palette in (primary: $primary,
accent: $accent, warn: $warn) {
&-#{$name} {
background-color:
material.get-color-from-palette($palette, default);
color: material.get-color-from-palette($palette,
default-contrast);
font: {
family: material.font-family($typography, button);
size: material.font-size($typography, button);
weight: material.font-weight($typography, button);
}
}
}
}
$bg: material.$light-theme-background-palette;
$fg: material.$light-theme-foreground-palette;
:host[disabled] button[class*="custom-button-"],
button[class*="custom-button-"]:disabled {
background-color:
material.get-color-from-palette($bg, disabled-button);
color: material.get-color-from-palette($fg, disabled-button);
}
Inspect the SCSS listing for palette definitions, theme color lookup, typography configuration, and disabled-button selectors. section 28.3.2
