fix(material/menu): fix divider color property (#31815)

tonyruscoe · web-flow · commit 05d71e53a16f · 2025-10-02T09:20:32.000-07:00
The material/divider component sets its color using the `border-top-color` but the material/menu component attempts to override this by setting the `color` property which causes any overrides to not get applied.
diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss
@@ -100,7 +100,7 @@ mat-menu {
 
   .mat-divider {
     // Use margin instead of padding since divider uses border-top to render out the line.
-    color: token-utils.slot(menu-divider-color, $fallbacks);
+    border-top-color: token-utils.slot(menu-divider-color, $fallbacks);
     margin-bottom: token-utils.slot(menu-divider-bottom-spacing, $fallbacks);
     margin-top: token-utils.slot(menu-divider-top-spacing, $fallbacks);
   }

Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ mat-menu {`
`100`	`100`
`101`	`101`	`.mat-divider {`
`102`	`102`	`// Use margin instead of padding since divider uses border-top to render out the line.`
`103`		`- color: token-utils.slot(menu-divider-color, $fallbacks);`
	`103`	`+ border-top-color: token-utils.slot(menu-divider-color, $fallbacks);`
`104`	`104`	`margin-bottom: token-utils.slot(menu-divider-bottom-spacing, $fallbacks);`
`105`	`105`	`margin-top: token-utils.slot(menu-divider-top-spacing, $fallbacks);`
`106`	`106`	`}`