diff --git a/chips/lib/_assist-chip.scss b/chips/lib/_assist-chip.scss index 0a37c23378..d6a5217e0e 100644 --- a/chips/lib/_assist-chip.scss +++ b/chips/lib/_assist-chip.scss @@ -4,15 +4,31 @@ // // go/keep-sorted start -@use '../../sass/theme'; +@use 'sass:list'; +// go/keep-sorted end +// go/keep-sorted start @use '../../tokens'; // go/keep-sorted end @mixin theme($tokens) { - $tokens: theme.validate-theme(tokens.md-comp-assist-chip-values(), $tokens); + $supported-tokens: list.join( + tokens.$md-comp-assist-chip-supported-tokens, + ( + 'container-shape-start-start', + 'container-shape-start-end', + 'container-shape-end-end', + 'container-shape-end-start' + ) + ); @each $token, $value in $tokens { - --md-assist-chip-#{$token}: #{$value}; + @if list.index($supported-tokens, $token) == null { + @error 'Token `#{$token}` is not a supported token.'; + } + + @if $value { + --md-assist-chip-#{$token}: #{$value}; + } } } @@ -23,5 +39,23 @@ @each $token, $value in $tokens { --_#{$token}: #{$value}; } + + // Support logical shape properties + --_container-shape-start-start: var( + --md-checkbox-shape-start-start, + var(--_container-shape) + ); + --_container-shape-start-end: var( + --md-checkbox-shape-start-end, + var(--_container-shape) + ); + --_container-shape-end-end: var( + --md-checkbox-shape-end-end, + var(--_container-shape) + ); + --_container-shape-end-start: var( + --md-checkbox-shape-end-start, + var(--_container-shape) + ); } } diff --git a/chips/lib/_filter-chip.scss b/chips/lib/_filter-chip.scss index 6837e9d20f..d562e405dd 100644 --- a/chips/lib/_filter-chip.scss +++ b/chips/lib/_filter-chip.scss @@ -3,17 +3,33 @@ // SPDX-License-Identifier: Apache-2.0 // +// go/keep-sorted start +@use 'sass:list'; +// go/keep-sorted end // go/keep-sorted start @use '../../ripple/ripple'; -@use '../../sass/theme'; @use '../../tokens'; // go/keep-sorted end @mixin theme($tokens) { - $tokens: theme.validate-theme(tokens.md-comp-filter-chip-values(), $tokens); + $supported-tokens: list.join( + tokens.$md-comp-filter-chip-supported-tokens, + ( + 'container-shape-start-start', + 'container-shape-start-end', + 'container-shape-end-end', + 'container-shape-end-start' + ) + ); @each $token, $value in $tokens { - --md-filter-chip-#{$token}: #{$value}; + @if list.index($supported-tokens, $token) == null { + @error 'Token `#{$token}` is not a supported token.'; + } + + @if $value { + --md-filter-chip-#{$token}: #{$value}; + } } } @@ -24,6 +40,24 @@ @each $token, $value in $tokens { --_#{$token}: #{$value}; } + + // Support logical shape properties + --_container-shape-start-start: var( + --md-checkbox-shape-start-start, + var(--_container-shape) + ); + --_container-shape-start-end: var( + --md-checkbox-shape-start-end, + var(--_container-shape) + ); + --_container-shape-end-end: var( + --md-checkbox-shape-end-end, + var(--_container-shape) + ); + --_container-shape-end-start: var( + --md-checkbox-shape-end-start, + var(--_container-shape) + ); } .selected { diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss index a6857559e1..befdc82fca 100644 --- a/chips/lib/_shared.scss +++ b/chips/lib/_shared.scss @@ -4,6 +4,7 @@ // // go/keep-sorted start +@use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @@ -31,6 +32,15 @@ 'pressed-opacity': var(--_pressed-state-layer-opacity), ) ); + + @include focus-ring.theme( + ( + 'shape-start-start': var(--_container-shape-start-start), + 'shape-start-end': var(--_container-shape-start-end), + 'shape-end-end': var(--_container-shape-end-end), + 'shape-end-start': var(--_container-shape-end-start), + ) + ); } .container { @@ -135,17 +145,6 @@ opacity: var(--_elevated-disabled-container-opacity); } - md-focus-ring { - @include focus-ring.theme( - ( - 'shape-start-start': var(--_container-shape-start-start), - 'shape-start-end': var(--_container-shape-start-end), - 'shape-end-end': var(--_container-shape-end-end), - 'shape-end-start': var(--_container-shape-end-start), - ) - ); - } - md-ripple { border-radius: inherit; } diff --git a/chips/lib/_suggestion-chip.scss b/chips/lib/_suggestion-chip.scss index 088697a342..b53c432f26 100644 --- a/chips/lib/_suggestion-chip.scss +++ b/chips/lib/_suggestion-chip.scss @@ -4,18 +4,31 @@ // // go/keep-sorted start -@use '../../sass/theme'; +@use 'sass:list'; +// go/keep-sorted end +// go/keep-sorted start @use '../../tokens'; // go/keep-sorted end @mixin theme($tokens) { - $tokens: theme.validate-theme( - tokens.md-comp-suggestion-chip-values(), - $tokens + $supported-tokens: list.join( + tokens.$md-comp-suggestion-chip-supported-tokens, + ( + 'container-shape-start-start', + 'container-shape-start-end', + 'container-shape-end-end', + 'container-shape-end-start' + ) ); @each $token, $value in $tokens { - --md-suggestion-chip-#{$token}: #{$value}; + @if list.index($supported-tokens, $token) == null { + @error 'Token `#{$token}` is not a supported token.'; + } + + @if $value { + --md-suggestion-chip-#{$token}: #{$value}; + } } } @@ -26,5 +39,23 @@ @each $token, $value in $tokens { --_#{$token}: #{$value}; } + + // Support logical shape properties + --_container-shape-start-start: var( + --md-checkbox-shape-start-start, + var(--_container-shape) + ); + --_container-shape-start-end: var( + --md-checkbox-shape-start-end, + var(--_container-shape) + ); + --_container-shape-end-end: var( + --md-checkbox-shape-end-end, + var(--_container-shape) + ); + --_container-shape-end-start: var( + --md-checkbox-shape-end-start, + var(--_container-shape) + ); } } diff --git a/tokens/_md-comp-assist-chip.scss b/tokens/_md-comp-assist-chip.scss index 2b6ae61591..4237660a9e 100644 --- a/tokens/_md-comp-assist-chip.scss +++ b/tokens/_md-comp-assist-chip.scss @@ -7,7 +7,6 @@ @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start -@use '../sass/shape'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @@ -116,13 +115,5 @@ $_default: ( ) ); - @each $token, $value in $tokens { - $tokens: map.set( - $tokens, - $token, - var(--md-assist-chip-#{$token}, #{$value}) - ); - } - $tokens: shape.resolve-tokens($tokens, 'container-shape'); @return $tokens; } diff --git a/tokens/_md-comp-filter-chip.scss b/tokens/_md-comp-filter-chip.scss index 81297bb16c..90ffaebfed 100644 --- a/tokens/_md-comp-filter-chip.scss +++ b/tokens/_md-comp-filter-chip.scss @@ -7,7 +7,6 @@ @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start -@use '../sass/shape'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @@ -225,14 +224,5 @@ $_default: ( ) ); - @each $token, $value in $tokens { - $tokens: map.set( - $tokens, - $token, - var(--md-filter-chip-#{$token}, #{$value}) - ); - } - - $tokens: shape.resolve-tokens($tokens, 'container-shape'); @return $tokens; } diff --git a/tokens/_md-comp-input-chip.scss b/tokens/_md-comp-input-chip.scss index 5a41eb5fa6..6be9ed68fc 100644 --- a/tokens/_md-comp-input-chip.scss +++ b/tokens/_md-comp-input-chip.scss @@ -7,7 +7,6 @@ @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start -@use '../sass/shape'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @@ -200,14 +199,5 @@ $_default: ( ) ); - @each $token, $value in $tokens { - $tokens: map.set( - $tokens, - $token, - var(--md-input-chip-#{$token}, #{$value}) - ); - } - - $tokens: shape.resolve-tokens($tokens, 'container-shape'); @return $tokens; } diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss index 3841f1a2cc..9ef2fb371f 100644 --- a/tokens/_md-comp-suggestion-chip.scss +++ b/tokens/_md-comp-suggestion-chip.scss @@ -7,7 +7,6 @@ @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start -@use '../sass/shape'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @@ -119,13 +118,5 @@ $_default: ( ) ); - @each $token, $value in $tokens { - $tokens: map.set( - $tokens, - $token, - var(--md-suggestion-chip-#{$token}, #{$value}) - ); - } - $tokens: shape.resolve-tokens($tokens, 'container-shape'); @return $tokens; }