chore(chips): remove shape resolver

PiperOrigin-RevId: 527361614
material-components · Apr 26, 2023 · 39acf68 · 39acf68
1 parent 969cd24
commit 39acf68
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 60 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }