diff --git a/labs/segmentedbutton/lib/_shared.scss b/labs/segmentedbutton/lib/_shared.scss index 5f155a088b..f47de7b98c 100644 --- a/labs/segmentedbutton/lib/_shared.scss +++ b/labs/segmentedbutton/lib/_shared.scss @@ -73,9 +73,9 @@ .md3-segmented-button__checkmark, .md3-segmented-button__icon, .md3-segmented-button__icon ::slotted([slot='icon']) { - height: var(--_with-icon-icon-size); - width: var(--_with-icon-icon-size); - font-size: var(--_with-icon-icon-size); + height: var(--_icon-size); + width: var(--_icon-size); + font-size: var(--_icon-size); } // Under the following conditions, we need to account for extra space between @@ -98,7 +98,7 @@ &.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark { .md3-segmented-button__graphic { // TODO(b/198759625): Use padding token instead of hardcoded 8px value. - width: calc(var(--_with-icon-icon-size) + 8px); + width: calc(var(--_icon-size) + 8px); } } @@ -163,7 +163,7 @@ .md3-segmented-button--unselected { .md3-segmented-button__icon { - color: var(--_unselected-with-icon-icon-color); + color: var(--_unselected-icon-color); } &:hover { @@ -204,11 +204,11 @@ background-color: var(--_selected-container-color); .md3-segmented-button__icon { - color: var(--_selected-with-icon-icon-color); + color: var(--_selected-icon-color); } .md3-segmented-button__checkmark-path { - stroke: var(--_selected-with-icon-icon-color); + stroke: var(--_selected-icon-color); } &:hover { diff --git a/labs/segmentedbutton/outlined-segmented-button_test.ts b/labs/segmentedbutton/outlined-segmented-button_test.ts new file mode 100644 index 0000000000..1aaf014dc5 --- /dev/null +++ b/labs/segmentedbutton/outlined-segmented-button_test.ts @@ -0,0 +1,17 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +// import 'jasmine'; (google3-only) + +import {createTokenTests} from '../../testing/tokens.js'; + +import {MdOutlinedSegmentedButton} from './outlined-segmented-button.js'; + +describe('', () => { + describe('.styles', () => { + createTokenTests(MdOutlinedSegmentedButton.styles); + }); +}); diff --git a/tokens/_md-comp-outlined-segmented-button.scss b/tokens/_md-comp-outlined-segmented-button.scss index c836cfe630..c35ddb6b24 100644 --- a/tokens/_md-comp-outlined-segmented-button.scss +++ b/tokens/_md-comp-outlined-segmented-button.scss @@ -16,54 +16,54 @@ $supported-tokens: ( // go/keep-sorted start - 'container-height', 'disabled-icon-color', - 'disabled-icon-opacity', 'disabled-label-text-color', - 'disabled-label-text-opacity', 'disabled-outline-color', - 'disabled-outline-opacity', - 'focus-state-layer-opacity', 'hover-state-layer-opacity', + 'icon-size', 'label-text-type', 'outline-color', - 'outline-width', 'pressed-state-layer-opacity', 'selected-container-color', 'selected-focus-icon-color', 'selected-focus-label-text-color', - 'selected-focus-state-layer-color', 'selected-hover-icon-color', 'selected-hover-label-text-color', 'selected-hover-state-layer-color', + 'selected-icon-color', 'selected-label-text-color', 'selected-pressed-icon-color', 'selected-pressed-label-text-color', 'selected-pressed-state-layer-color', - 'selected-with-icon-icon-color', - 'shape', 'unselected-focus-icon-color', 'unselected-focus-label-text-color', - 'unselected-focus-state-layer-color', 'unselected-hover-icon-color', 'unselected-hover-label-text-color', 'unselected-hover-state-layer-color', + 'unselected-icon-color', 'unselected-label-text-color', 'unselected-pressed-icon-color', 'unselected-pressed-label-text-color', 'unselected-pressed-state-layer-color', - 'unselected-with-icon-icon-color', - 'with-icon-icon-size', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start + 'container-height', + 'disabled-icon-opacity', + 'disabled-label-text-opacity', + 'disabled-outline-opacity', + 'focus-state-layer-opacity', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-tracking', 'label-text-weight', + 'outline-width', + 'selected-focus-state-layer-color', + 'shape', + 'unselected-focus-state-layer-color', // go/keep-sorted end ); @@ -78,7 +78,13 @@ $_default: ( $tokens: values.validate( md-comp-outlined-segmented-button.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, - $unsupported-tokens: $unsupported-tokens + $unsupported-tokens: $unsupported-tokens, + $renamed-tokens: ( + // Remove "with-*" prefixes (b/273534858) + 'with-icon-icon-size': 'icon-size', + 'selected-with-icon-icon-color': 'selected-icon-color', + 'unselected-with-icon-icon-color': 'unselected-icon-color' + ) ); // TODO(b/271876162): remove when tokens compiler emits typescale tokens