fix(button)!: rename spacing tokens

BREAKING CHANGE: Rename `--md-<button>-spacing-<token>` to `--md-<button>-<token>-space`. Rename `--md-<button>-with-icon-*` to `--md-<button>-with-leading-icon-*`.

PiperOrigin-RevId: 552323014

button/internal/_shared.scss

@@ -67,8 +67,8 @@
     font: var(--_label-text-type);
     color: var(--_label-text-color);
     // TODO(b/181413732): Verify token below are named correctly
-    padding-inline-start: var(--_spacing-leading);
-    padding-inline-end: var(--_spacing-trailing);
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
     gap: 8px;
 
     &::before {
@@ -139,13 +139,13 @@
 
   // TODO(b/181413732): Verify token below are named correctly
   .button--icon-leading {
-    padding-inline-start: var(--_with-icon-spacing-leading);
-    padding-inline-end: var(--_with-icon-spacing-trailing);
+    padding-inline-start: var(--_with-leading-icon-leading-space);
+    padding-inline-end: var(--_with-leading-icon-trailing-space);
   }
 
   .button--icon-trailing {
-    padding-inline-start: var(--_with-trailing-icon-spacing-leading);
-    padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
+    padding-inline-start: var(--_with-trailing-icon-leading-space);
+    padding-inline-end: var(--_with-trailing-icon-trailing-space);
   }
 
   .link-button-wrapper {

catalog/stories/components/knob-ui-components.ts

@@ -56,8 +56,8 @@ export class KnobColorSelector extends LitElement {
       display: inline-block;
       position: relative;
       margin-inline-end: 16px;
-      --md-outlined-button-spacing-leading: 8px;
-      --md-outlined-button-spacing-trailing: 8px;
+      --md-outlined-button-leading-space: 8px;
+      --md-outlined-button-trailing-space: 8px;
       --md-outlined-button-container-height: 32px;
       /* md-checkbox sizes */
       --_component-size: 40px;

progress/demo/stories.ts

@@ -93,7 +93,7 @@ const components: MaterialStoryInit<StoryKnobs> = {
     md-tonal-button md-circular-progress {
       --md-circular-progress-size: 36px;
       --md-circular-progress-active-indicator-width: ${(4 / 36) * 100};
-      --md-tonal-button-with-icon-spacing-trailing: 8px;
+      --md-tonal-button-with-leading-icon-trailing-space: 8px;
     }
 
     .around-icon {

tokens/_md-comp-elevated-button.scss

@@ -42,17 +42,17 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -84,13 +84,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 24px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 24px),
+      'trailing-space': if($exclude-hardcoded-values, null, 24px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-leading-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 24px),
+      'with-trailing-icon-leading-space':
         if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
     ),

tokens/_md-comp-filled-button.scss

@@ -42,17 +42,17 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -84,13 +84,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 24px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 24px),
+      'trailing-space': if($exclude-hardcoded-values, null, 24px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-leading-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 24px),
+      'with-trailing-icon-leading-space':
         if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
     ),

tokens/_md-comp-filled-tonal-button.scss

@@ -42,17 +42,17 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -84,13 +84,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 24px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 24px),
+      'trailing-space': if($exclude-hardcoded-values, null, 24px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-leading-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 24px),
+      'with-trailing-icon-leading-space':
         if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
     ),

tokens/_md-comp-outlined-button.scss

@@ -35,19 +35,19 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-outline-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -80,13 +80,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 24px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 24px),
+      'trailing-space': if($exclude-hardcoded-values, null, 24px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-leading-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 24px),
+      'with-trailing-icon-leading-space':
         if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
     ),

tokens/_md-comp-text-button.scss

@@ -33,16 +33,16 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -73,13 +73,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 12px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 12px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 12px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 16px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 12px),
+      'trailing-space': if($exclude-hardcoded-values, null, 12px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 12px),
+      'with-leading-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-trailing-icon-leading-space':
         if($exclude-hardcoded-values, null, 16px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 12px),
       // go/keep-sorted end
     ),