chore(chips): add assist and suggestion token validation

PiperOrigin-RevId: 518965126
material-components · Mar 23, 2023 · f034461 · f034461
1 parent bf61232
commit f034461
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 38 deletions.
diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss
@@ -74,16 +74,8 @@
     pointer-events: none;
   }
 
-  .flat {
-    @include elevation.theme(
-      (
-        level: var(--_flat-container-elevation),
-      )
-    );
-
-    &::before {
-      border: var(--_flat-outline-width) solid var(--_flat-outline-color);
-    }
+  .flat::before {
+    border: var(--_flat-outline-width) solid var(--_flat-outline-color);
   }
 
   .flat:focus::before {
@@ -96,8 +88,6 @@
   }
 
   .elevated {
-    border: none;
-
     @include elevation.theme(
       (
         level: var(--_elevated-container-elevation),
@@ -200,6 +190,9 @@
 
   .icon {
     align-self: center;
+    font-size: var(--_icon-size);
+    max-height: var(--_icon-size);
+    max-width: var(--_icon-size);
   }
 
   .icon ::slotted(*) {
@@ -210,9 +203,6 @@
 
   .icon.leading {
     color: var(--_leading-icon-color);
-    font-size: var(--_leading-icon-size);
-    max-height: var(--_leading-icon-size);
-    max-width: var(--_leading-icon-size);
   }
 
   :hover .icon.leading {

diff --git a/tokens/_md-comp-assist-chip.scss b/tokens/_md-comp-assist-chip.scss
@@ -14,31 +14,76 @@
 @use './md-sys-state';
 @use './md-sys-typescale';
 @use './v0_161/md-comp-assist-chip';
+@use './values';
 // go/keep-sorted end
 
-$_unsupported-tokens: (
+$supported-tokens: (
+  // go/keep-sorted start
+  'container-height',
+  'container-shape',
+  'container-surface-tint-layer-color',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-icon-color',
+  'disabled-leading-icon-opacity',
+  'elevated-container-color',
+  'elevated-container-elevation',
+  'elevated-container-shadow-color',
+  'elevated-disabled-container-color',
+  'elevated-disabled-container-elevation',
+  'elevated-disabled-container-opacity',
+  'elevated-focus-container-elevation',
+  'elevated-hover-container-elevation',
+  'elevated-pressed-container-elevation',
+  'flat-disabled-outline-color',
+  'flat-disabled-outline-opacity',
+  'flat-focus-outline-color',
+  'flat-outline-color',
+  'flat-outline-width',
+  'focus-label-text-color',
+  'focus-leading-icon-color',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity',
+  'hover-label-text-color',
+  'hover-leading-icon-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'icon-size',
+  'label-text-color',
+  'label-text-type',
+  'leading-icon-color',
+  'pressed-label-text-color',
+  'pressed-leading-icon-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
   // go/keep-sorted start
   'dragged-container-elevation',
   'dragged-label-text-color',
   'dragged-leading-icon-color',
   'dragged-state-layer-color',
   'dragged-state-layer-opacity',
+  'flat-container-elevation',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
   'label-text-tracking',
-  'label-text-weight' // go/keep-sorted end
+  'label-text-weight',
+  // go/keep-sorted end
 );
 
-$_renamed-tokens: (
+$renamed-tokens: (
   // go/keep-sorted start
   'with-icon-disabled-icon-color': 'disabled-leading-icon-color',
   'with-icon-disabled-icon-opacity': 'disabled-leading-icon-opacity',
   'with-icon-dragged-icon-color': 'dragged-leading-icon-color',
   'with-icon-focus-icon-color': 'focus-leading-icon-color',
   'with-icon-hover-icon-color': 'hover-leading-icon-color',
   'with-icon-icon-color': 'leading-icon-color',
-  'with-icon-icon-size': 'leading-icon-size',
+  'with-icon-icon-size': 'icon-size',
   'with-icon-pressed-icon-color': 'pressed-leading-icon-color',
   // go/keep-sorted end
 );
@@ -52,12 +97,13 @@ $_default: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-assist-chip.values($deps, $exclude-hardcoded-values);
-  @each $old-token, $new-token in $_renamed-tokens {
-    $tokens: map.set($tokens, $new-token, map.get($tokens, $old-token));
-    $tokens: map.remove($tokens, $old-token);
-  }
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
+  $tokens: values.validate(
+    md-comp-assist-chip.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: $renamed-tokens
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,

diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss
@@ -14,15 +14,58 @@
 @use './md-sys-state';
 @use './md-sys-typescale';
 @use './v0_161/md-comp-suggestion-chip';
+@use './values';
 // go/keep-sorted end
 
-$_unsupported-tokens: (
+$supported-tokens: (
+  // go/keep-sorted start
+  'container-height',
+  'container-shape',
+  'container-surface-tint-layer-color',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-icon-color',
+  'elevated-container-color',
+  'elevated-container-elevation',
+  'elevated-container-shadow-color',
+  'elevated-disabled-container-color',
+  'elevated-disabled-container-elevation',
+  'elevated-disabled-container-opacity',
+  'elevated-focus-container-elevation',
+  'elevated-hover-container-elevation',
+  'elevated-pressed-container-elevation',
+  'flat-disabled-outline-color',
+  'flat-disabled-outline-opacity',
+  'flat-focus-outline-color',
+  'flat-outline-color',
+  'flat-outline-width',
+  'focus-label-text-color',
+  'focus-leading-icon-color',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity',
+  'hover-label-text-color',
+  'hover-leading-icon-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'icon-size',
+  'label-text-color',
+  'label-text-type',
+  'leading-icon-color',
+  'pressed-label-text-color',
+  'pressed-leading-icon-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
   // go/keep-sorted start
   'dragged-container-elevation',
   'dragged-label-text-color',
   'dragged-leading-icon-color',
   'dragged-state-layer-color',
   'dragged-state-layer-opacity',
+  'flat-container-elevation',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
@@ -31,7 +74,7 @@ $_unsupported-tokens: (
   // go/keep-sorted end
 );
 
-$_renamed-tokens: (
+$renamed-tokens: (
   // go/keep-sorted start
   'with-leading-icon-disabled-leading-icon-color': 'disabled-leading-icon-color',
   'with-leading-icon-disabled-leading-icon-opacity':
@@ -40,28 +83,27 @@ $_renamed-tokens: (
   'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',
   'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',
   'with-leading-icon-leading-icon-color': 'leading-icon-color',
-  'with-leading-icon-leading-icon-size': 'leading-icon-size',
+  'with-leading-icon-leading-icon-size': 'icon-size',
   'with-leading-icon-pressed-leading-icon-color': 'pressed-leading-icon-color',
   // go/keep-sorted end
 );
 
 $_default: (
-  // go/keep-sorted start
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-elevation': md-sys-elevation.values(),
   'md-sys-shape': md-sys-shape.values(),
   'md-sys-state': md-sys-state.values(),
   'md-sys-typescale': md-sys-typescale.values(),
-  // go/keep-sorted end
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values);
-  @each $old-token, $new-token in $_renamed-tokens {
-    $tokens: map.set($tokens, $new-token, map.get($tokens, $old-token));
-    $tokens: map.remove($tokens, $old-token);
-  }
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
+  $tokens: values.validate(
+    md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: $renamed-tokens
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,

diff --git a/tokens/_values.scss b/tokens/_values.scss
@@ -69,7 +69,7 @@
         @error 'values.validate($unsupported-tokens: (\'#{$unsupported-token}\')) token is not in the provided values.';
       }
 
-      $tokens: map.remove($tokens, $unsupported-token);
+      $values: map.remove($values, $unsupported-token);
     }
   }
 
@@ -103,7 +103,7 @@
 
   @each $supported-token in $supported-tokens {
     @if not map.has-key($values, $supported-token) {
-      @error 'The provided values are missing the \'#{$supported-token}\' token.';
+      @error 'The provided values are missing the supported \'#{$supported-token}\' token.';
     }
   }