chore(labs): fix square toggle button shape

PiperOrigin-RevId: 900872156

Author: asyncliz

labs/gb/components/button/_button-tokens.scss

@@ -25,18 +25,6 @@
   --container-shape: var(--md-sys-shape-corner-md);
 }
 
-@mixin square {
-  --container-shape: var(--md-sys-shape-corner-md);
-}
-
-@mixin selected-square {
-  --container-shape: calc(var(--container-height) / 2);
-}
-
-@mixin pressed {
-  --container-shape: var(--md-sys-shape-corner-sm);
-}
-
 @mixin filled {
   --container-color: var(--md-sys-color-primary);
   --icon-color: var(--md-sys-color-on-primary);
@@ -132,14 +120,6 @@
   --container-shape: var(--md-sys-shape-corner-lg);
 }
 
-@mixin md-square {
-  --container-shape: var(--md-sys-shape-corner-lg);
-}
-
-@mixin md-pressed {
-  --container-shape: var(--md-sys-shape-corner-md);
-}
-
 @mixin lg {
   --container-height: 96px;
   --icon-label-space: 12px;
@@ -154,14 +134,6 @@
   --container-shape: var(--md-sys-shape-corner-xl);
 }
 
-@mixin lg-square {
-  --container-shape: var(--md-sys-shape-corner-xl);
-}
-
-@mixin lg-pressed {
-  --container-shape: var(--md-sys-shape-corner-lg);
-}
-
 @mixin xl {
   --container-height: 136px;
   --icon-label-space: 16px;
@@ -176,11 +148,39 @@
   --container-shape: var(--md-sys-shape-corner-xl);
 }
 
-@mixin xl-square {
+@mixin square {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin square-md {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin square-lg {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square-xl {
   --container-shape: var(--md-sys-shape-corner-xl);
 }
 
-@mixin xl-pressed {
+@mixin square-selected {
+  --container-shape: calc(var(--container-height) / 2);
+}
+
+@mixin pressed {
+  --container-shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin pressed-md {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin pressed-lg {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin pressed-xl {
   --container-shape: var(--md-sys-shape-corner-lg);
 }
 

labs/gb/components/button/button.scss

@@ -14,15 +14,6 @@
     &:is(.btn-selected, [aria-pressed='true']) {
       @include button-tokens.selected;
     }
-    &.btn-square {
-      @include button-tokens.square;
-    }
-    &:is(.btn-selected, [aria-pressed='true']):where(.btn-square) {
-      @include button-tokens.selected-square;
-    }
-    &:is(:active, .active):where(:not(:disabled, .disabled)) {
-      @include button-tokens.pressed;
-    }
     &.btn-filled {
       @include button-tokens.filled;
       &:where(.btn-unselected, [aria-pressed='false']) {
@@ -70,35 +61,44 @@
       &:where(.btn-selected, [aria-pressed='true']) {
         @include button-tokens.md-selected;
       }
-      &:where(.btn-square) {
-        @include button-tokens.md-square;
-      }
-      &:where(:is(:active, .active):not(:disabled, .disabled)) {
-        @include button-tokens.md-pressed;
-      }
     }
     &.btn-lg {
       @include button-tokens.lg;
       &:where(.btn-selected, [aria-pressed='true']) {
         @include button-tokens.lg-selected;
       }
-      &:where(.btn-square) {
-        @include button-tokens.lg-square;
-      }
-      &:where(:is(:active, .active):not(:disabled, .disabled)) {
-        @include button-tokens.lg-pressed;
-      }
     }
     &.btn-xl {
       @include button-tokens.xl;
       &:where(.btn-selected, [aria-pressed='true']) {
         @include button-tokens.xl-selected;
       }
-      &:where(.btn-square) {
-        @include button-tokens.xl-square;
+    }
+    &.btn-square {
+      @include button-tokens.square;
+      &:where(.btn-md) {
+        @include button-tokens.square-md;
       }
-      &:where(:is(:active, .active):not(:disabled, .disabled)) {
-        @include button-tokens.xl-pressed;
+      &:where(.btn-lg) {
+        @include button-tokens.square-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.square-xl;
+      }
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.square-selected;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include button-tokens.pressed;
+      &:where(.btn-md) {
+        @include button-tokens.pressed-md;
+      }
+      &:where(.btn-lg) {
+        @include button-tokens.pressed-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.pressed-xl;
       }
     }
     &:is(:disabled, .disabled) {