fix(material/button-toggle): use smaller border radius (angular#31084)

crisbeto · web-flow · commit 90413f94b0b7 · 2025-05-12T17:45:35.000+02:00
Currently the button toggle uses the `corner-full` value for its broder radius which starts too look weird for a vertical group with text inside the toggles. These changes switch to using the `corner-extra-large` value instead. Fixes angular#31010.
diff --git a/src/material/button-toggle/_m3-button-toggle.scss b/src/material/button-toggle/_m3-button-toggle.scss
@@ -17,7 +17,7 @@ $prefix: (mat, button-toggle);
   $tokens: sass-utils.merge-all(
     m3-utils.generate-typography-tokens($systems, label-text, label-large),
   (
-    shape: map.get($systems, md-sys-shape, corner-full),
+    shape: map.get($systems, md-sys-shape, corner-extra-large),
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
     text-color: map.get($systems, md-sys-color, on-surface),

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ $prefix: (mat, button-toggle);`
`17`	`17`	`$tokens: sass-utils.merge-all(`
`18`	`18`	`m3-utils.generate-typography-tokens($systems, label-text, label-large),`
`19`	`19`	`(`
`20`		`- shape: map.get($systems, md-sys-shape, corner-full),`
	`20`	`+ shape: map.get($systems, md-sys-shape, corner-extra-large),`
`21`	`21`	`hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),`
`22`	`22`	`focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),`
`23`	`23`	`text-color: map.get($systems, md-sys-color, on-surface),`