From cac97678831d48d4eb4a606ca50f92673a1dc20c Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Fri, 21 Aug 2026 12:29:56 -0700
Subject: [PATCH] fix(labs): align outline width tokens to size mixins for
 button

PiperOrigin-RevId: 968633107
---
 labs/gb/components/button/_button-tokens.scss | 28 ++++++++-----------
 labs/gb/components/button/button.scss         |  6 ----
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/labs/gb/components/button/_button-tokens.scss b/labs/gb/components/button/_button-tokens.scss
index 969223d3bc..b4e7992ce7 100644
--- a/labs/gb/components/button/_button-tokens.scss
+++ b/labs/gb/components/button/_button-tokens.scss
@@ -81,15 +81,6 @@
   --icon-color: var(--md-sys-color-on-surface-variant);
   --label-text-color: var(--md-sys-color-on-surface-variant);
   --outline-color: var(--md-sys-color-outline-variant);
-  --outline-width: 1px;
-}
-
-@mixin outlined-lg {
-  --outline-width: 2px;
-}
-
-@mixin outlined-xl {
-  --outline-width: 3px;
 }
 
 @mixin outlined-selected {
@@ -99,31 +90,34 @@
 }
 
 @mixin text {
-  --label-text-color: var(--md-sys-color-primary);
   --icon-color: var(--md-sys-color-primary);
+  --label-text-color: var(--md-sys-color-primary);
   --state-layer-color: var(--md-sys-color-primary);
 }
 
 @mixin xs {
   --container-height: 32px;
   --leading-space: 12px;
+  --outline-width: 1px;
   --trailing-space: 12px;
 }
 
 @mixin sm {
   --container-height: 40px;
   --leading-space: 16px;
+  --outline-width: 1px;
   --trailing-space: 16px;
 }
 
 @mixin md {
   --container-height: 56px;
-  --leading-space: 24px;
-  --trailing-space: 24px;
   --icon-size: 24px;
   --label-text: var(--md-sys-typescale-title-md);
   --label-text-axes: var(--md-sys-typescale-title-md-axes);
   --label-text-tracking: var(--md-sys-typescale-title-md-tracking);
+  --leading-space: 24px;
+  --outline-width: 1px;
+  --trailing-space: 24px;
 }
 
 @mixin md-selected {
@@ -134,11 +128,12 @@
   --container-height: 96px;
   --icon-label-space: 12px;
   --icon-size: 32px;
-  --leading-space: 48px;
-  --trailing-space: 48px;
   --label-text: var(--md-sys-typescale-headline-sm);
   --label-text-axes: var(--md-sys-typescale-headline-sm-axes);
   --label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);
+  --leading-space: 48px;
+  --outline-width: 2px;
+  --trailing-space: 48px;
 }
 
 @mixin lg-selected {
@@ -149,11 +144,12 @@
   --container-height: 136px;
   --icon-label-space: 16px;
   --icon-size: 40px;
-  --leading-space: 64px;
-  --trailing-space: 64px;
   --label-text: var(--md-sys-typescale-headline-lg);
   --label-text-axes: var(--md-sys-typescale-headline-lg-axes);
   --label-text-tracking: var(--md-sys-typescale-headline-lg-tracking);
+  --leading-space: 64px;
+  --outline-width: 3px;
+  --trailing-space: 64px;
 }
 
 @mixin xl-selected {
diff --git a/labs/gb/components/button/button.scss b/labs/gb/components/button/button.scss
index 5c595fca25..67bae5f15c 100644
--- a/labs/gb/components/button/button.scss
+++ b/labs/gb/components/button/button.scss
@@ -40,12 +40,6 @@
     }
     &.btn-outlined {
       @include button-tokens.outlined;
-      &:where(.btn-lg) {
-        @include button-tokens.outlined-lg;
-      }
-      &:where(.btn-xl) {
-        @include button-tokens.outlined-xl;
-      }
       &:where(.btn-selected, [aria-pressed='true']) {
         @include button-tokens.outlined-selected;
       }