diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss index 4fbeba681..7dc98ac9f 100644 --- a/button/internal/_shared.scss +++ b/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 { diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts index 7a6a55a1a..399047165 100644 --- a/catalog/stories/components/knob-ui-components.ts +++ b/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; diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts index a25a6e8f4..9258cbd63 100644 --- a/progress/demo/stories.ts +++ b/progress/demo/stories.ts @@ -93,7 +93,7 @@ const components: MaterialStoryInit = { 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 { diff --git a/tokens/_md-comp-elevated-button.scss b/tokens/_md-comp-elevated-button.scss index 857d826b1..d6bab8ce2 100644 --- a/tokens/_md-comp-elevated-button.scss +++ b/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-spacing-trailing': + 'with-trailing-icon-leading-space': + if($exclude-hardcoded-values, null, 24px), + 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end ), diff --git a/tokens/_md-comp-filled-button.scss b/tokens/_md-comp-filled-button.scss index a6caf6c2b..20b13e9f9 100644 --- a/tokens/_md-comp-filled-button.scss +++ b/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-spacing-trailing': + 'with-trailing-icon-leading-space': + if($exclude-hardcoded-values, null, 24px), + 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end ), diff --git a/tokens/_md-comp-filled-tonal-button.scss b/tokens/_md-comp-filled-tonal-button.scss index fd1fd4599..4879670b0 100644 --- a/tokens/_md-comp-filled-tonal-button.scss +++ b/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-spacing-trailing': + 'with-trailing-icon-leading-space': + if($exclude-hardcoded-values, null, 24px), + 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end ), diff --git a/tokens/_md-comp-outlined-button.scss b/tokens/_md-comp-outlined-button.scss index 5d776b9df..222c8c4e3 100644 --- a/tokens/_md-comp-outlined-button.scss +++ b/tokens/_md-comp-outlined-button.scss @@ -35,6 +35,7 @@ $supported-tokens: ( 'icon-size', 'label-text-color', 'label-text-type', + 'leading-space', 'outline-color', 'outline-width', 'pressed-icon-color', @@ -42,12 +43,11 @@ $supported-tokens: ( '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-spacing-trailing': + 'with-trailing-icon-leading-space': + if($exclude-hardcoded-values, null, 24px), + 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end ), diff --git a/tokens/_md-comp-text-button.scss b/tokens/_md-comp-text-button.scss index f537e31ec..35316edc2 100644 --- a/tokens/_md-comp-text-button.scss +++ b/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-spacing-trailing': + 'with-trailing-icon-leading-space': + if($exclude-hardcoded-values, null, 16px), + 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 12px), // go/keep-sorted end ),