diff --git a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html
index 5925e2991940..f7c76412e83a 100644
--- a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html
+++ b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html
@@ -8,3 +8,29 @@
matButton="elevated"
disabled
matTooltip="This is a tooltip!">Default disabled button
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts
index 3cac4066ffeb..1bc92c975e2b 100644
--- a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts
+++ b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts
@@ -1,5 +1,6 @@
import {Component} from '@angular/core';
-import {MatButton} from '@angular/material/button';
+import {MatButton, MatFabButton, MatMiniFabButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
import {MatTooltip} from '@angular/material/tooltip';
/**
@@ -9,6 +10,6 @@ import {MatTooltip} from '@angular/material/tooltip';
selector: 'button-disabled-interactive-example',
templateUrl: 'button-disabled-interactive-example.html',
styleUrl: 'button-disabled-interactive-example.css',
- imports: [MatButton, MatTooltip],
+ imports: [MatButton, MatFabButton, MatMiniFabButton, MatIcon, MatTooltip],
})
export class ButtonDisabledInteractiveExample {}
diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss
index 1653cf1f9c88..7fd2e7c27751 100644
--- a/src/material/button/_m2-fab.scss
+++ b/src/material/button/_m2-fab.scss
@@ -20,43 +20,41 @@
@return (
base: (
- fab-container-elevation-shadow: elevation.get-box-shadow(6),
fab-container-shape: 50%,
fab-touch-target-size: $touch-target-size,
- fab-extended-container-elevation-shadow: elevation.get-box-shadow(6),
fab-extended-container-height: 48px,
fab-extended-container-shape: 24px,
- fab-extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
- fab-extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
- fab-extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
- fab-focus-container-elevation-shadow: elevation.get-box-shadow(8),
- fab-hover-container-elevation-shadow: elevation.get-box-shadow(8),
- fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
- fab-small-container-elevation-shadow: elevation.get-box-shadow(6),
fab-small-container-shape: 50%,
fab-small-touch-target-size: $touch-target-size,
- fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
- fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
- fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
),
color: (
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: map.get($system, on-surface-variant),
+ fab-container-elevation-shadow: elevation.get-box-shadow(6),
fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
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-disabled-container-color: $disabled-container,
+ fab-disabled-container-elevation-shadow: elevation.get-box-shadow(0),
+ fab-disabled-label-text-color: $disabled,
+ fab-disabled-state-layer-color: map.get($system, on-surface-variant),
+ fab-extended-container-elevation-shadow: elevation.get-box-shadow(6),
+ fab-extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+ fab-extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+ fab-extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+ fab-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+ fab-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+ fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
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: map.get($system, on-surface-variant),
+ fab-small-container-elevation-shadow: elevation.get-box-shadow(6),
+ fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
fab-small-foreground-color: map.get($system, on-surface),
+ fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+ fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
fab-small-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
diff --git a/src/material/button/_m3-fab.scss b/src/material/button/_m3-fab.scss
index 29798b9071ed..7a9d7eda38db 100644
--- a/src/material/button/_m3-fab.scss
+++ b/src/material/button/_m3-fab.scss
@@ -26,10 +26,6 @@
color: (
fab-container-color: map.get($system, primary-container),
fab-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
- fab-disabled-state-container-color:
- m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
- fab-disabled-state-foreground-color:
- m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
fab-extended-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
fab-extended-focus-container-elevation-shadow:
elevation.get-box-shadow(map.get($system, level3)),
@@ -41,16 +37,19 @@
fab-foreground-color: map.get($system, on-primary-container),
fab-hover-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level4)),
fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
- fab-pressed-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+ fab-disabled-container-color:
+ m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+ fab-disabled-container-elevation-shadow:
+ elevation.get-box-shadow(map.get($system, level0)),
+ fab-disabled-label-text-color:
+ m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+ fab-disabled-state-layer-color: map.get($system, on-surface-variant),
+ fab-pressed-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
fab-ripple-color: m3-utils.color-with-opacity(
map.get($system, on-primary-container), map.get($system, pressed-state-layer-opacity)),
fab-small-container-color: map.get($system, primary-container),
fab-small-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
- fab-small-disabled-state-container-color:
- m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
- fab-small-disabled-state-foreground-color:
- m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
fab-small-focus-container-elevation-shadow:
elevation.get-box-shadow(map.get($system, level3)),
fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
@@ -65,8 +64,6 @@
map.get($system, on-primary-container), map.get($system, pressed-state-layer-opacity)),
fab-small-state-layer-color: map.get($system, on-primary-container),
fab-state-layer-color: map.get($system, on-primary-container),
- fab-disabled-state-layer-color: null,
- fab-small-disabled-state-layer-color: null,
),
typography: (
fab-extended-label-text-font: map.get($system, label-large-font),
diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss
index de6e03f23c1e..0d621f64a4b9 100644
--- a/src/material/button/fab.scss
+++ b/src/material/button/fab.scss
@@ -116,8 +116,13 @@ $fallbacks: m3-fab.get-tokens();
}
@include button-base.mat-private-button-disabled {
- color: token-utils.slot(fab-disabled-state-foreground-color, $fallbacks);
- background-color: token-utils.slot(fab-disabled-state-container-color, $fallbacks);
+ color: token-utils.slot(fab-disabled-label-text-color, $fallbacks);
+ background-color: token-utils.slot(fab-disabled-container-color, $fallbacks);
+
+ &.mat-mdc-button-disabled {
+ box-shadow: token-utils.slot(
+ fab-disabled-container-elevation-shadow, $fallbacks);
+ }
}
@include button-base.mat-private-button-touch-target(true, fab-touch-target-size,
@@ -150,15 +155,20 @@ $fallbacks: m3-fab.get-tokens();
}
@include button-base.mat-private-button-disabled {
- color: token-utils.slot(fab-small-disabled-state-foreground-color, $fallbacks);
- background-color: token-utils.slot(fab-small-disabled-state-container-color, $fallbacks);
+ color: token-utils.slot(fab-disabled-label-text-color, $fallbacks);
+ background-color: token-utils.slot(fab-disabled-container-color, $fallbacks);
+
+ &.mat-mdc-button-disabled {
+ box-shadow: token-utils.slot(
+ fab-disabled-container-elevation-shadow, $fallbacks);
+ }
}
@include button-base.mat-private-button-touch-target(true,
fab-small-touch-target-size, fab-small-touch-target-display, $fallbacks);
@include button-base.mat-private-button-ripple(fab-small-ripple-color,
fab-small-state-layer-color,
- fab-small-disabled-state-layer-color, fab-small-hover-state-layer-opacity,
+ fab-disabled-state-layer-color, fab-small-hover-state-layer-opacity,
fab-small-focus-state-layer-opacity, fab-small-pressed-state-layer-opacity, $fallbacks);
}
diff --git a/src/material/menu/_m3-menu.scss b/src/material/menu/_m3-menu.scss
index 20ecd0555dad..e18414e9f1f1 100644
--- a/src/material/menu/_m3-menu.scss
+++ b/src/material/menu/_m3-menu.scss
@@ -19,6 +19,7 @@
menu-item-with-icon-trailing-spacing: 12px,
),
color: (
+ menu-container-elevation-shadow: elevation.get-box-shadow(2),
menu-container-shape: map.get($system, corner-extra-small),
menu-divider-color: map.get($system, surface-variant),
menu-item-label-text-color: map.get($system, on-surface),
@@ -28,7 +29,6 @@
menu-item-focus-state-layer-color: m3-utils.color-with-opacity(
map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
menu-container-color: map.get($system, surface-container),
- menu-container-elevation-shadow: elevation.get-box-shadow(2),
),
typography: (
menu-item-label-text-font: map.get($system, label-large-font),