checkin

Author: andrewseguin

src/material/autocomplete/autocomplete.scss

@@ -19,9 +19,9 @@ div.mat-mdc-autocomplete-panel {
 
   @include token-utils.use-tokens(
     tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-token-slots()) {
-    @include token-utils.create-token-slot(border-radius, container-shape);
-    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
-    @include token-utils.create-token-slot(background-color, background-color);
+    border-radius: token-utils.slot(container-shape);
+    box-shadow: token-utils.slot(container-elevation-shadow);
+    background-color: token-utils.slot(background-color);
   }
 
   @include cdk.high-contrast {

src/material/core/tokens/_token-utils.scss

@@ -73,10 +73,21 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 @mixin create-token-slot($property, $token, $fallback: null) {
   $_assert: _assert-use-tokens($token);
   @if map.get($_tokens, $token) != null {
-    #{$property}: #{_get-token-value($token, $fallback)};
+    #{$property}: #{slot($token, $fallback)};
+  } @else {
+    @error 'Missing token value for #{token}';
   }
 }
 
+// Returns the token slot value.
+// Accepts an optional fallback parameter to include in the CSS variable.
+// If $fallback is `true`, then use the tokens map to get the fallback.
+// TODO: Remove the use case where we accept "true" and handle any failing client screenshots
+@function slot($token, $fallback: null) {
+  $_assert: _assert-use-tokens($token);
+  @return _get-token-value($token, $fallback);
+}
+
 // Returns the name of a token including the current prefix. Intended to be used in calculations
 // involving tokens. `create-token-slot` should be used when outputting tokens.
 @function get-token-variable-name($token) {