@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/chips/chip/lib/_chip-theme.scss

@@ -12,23 +12,19 @@
 @use 'sass:math';
 @use 'sass:color';
 
-@use '@material/web/compat/density/density';
-@use '@material/web/compat/theme/keys';
-@use '@material/web/compat/theme/state';
-@use '@material/web/compat/theme/theme-color';
-@use '@material/web/elevation/lib/elevation-theme';
-@use '@material/web/ripple/ripple-theme';
-@use '@material/web/sass/dom';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/typography';
-// TODO(kainby): Uncomment when styles are traslated to md3 shape.
-// @use '@material/web/sass/shape';
+@use '../../../elevationold/lib/elevation-theme';
+@use '../../../ripple/ripple';
+@use '../../../sass/dom';
+@use '../../../sass/resolvers';
+@use '../../../sass/theme';
+@use '../../../sass/typography';
+// TODO(b/240224981): Uncomment when styles are traslated to md3 shape.
+// @use '../../../sass/shape';
 
 $height: 32px;
 $minimum-height: 24px;
 $maximum-height: $height;
-$density-scale: density.$default-scale;
+$density-scale: 0;
 $density-config: (
   height: (
     default: $height,
@@ -38,19 +34,15 @@ $density-config: (
 );
 $radius: math.div($height, 2);
 $type-scale: body2;
-$container-color: color.mix(
-  theme-color.prop-value(on-surface),
-  theme-color.prop-value(surface),
-  12%
-);
-$text-label-color: rgba(theme-color.prop-value(on-surface), 0.87);
-$icon-color: rgba(theme-color.prop-value(on-surface), 0.87);
-$checkmark-color: rgba(theme-color.prop-value(on-surface), 0.87);
-$trailing-action-color: rgba(theme-color.prop-value(on-surface), 0.87);
+$container-color: color.mix(#000, #fff, 12%);
+$text-label-color: rgba(#000, 0.87);
+$icon-color: rgba(#000, 0.87);
+$checkmark-color: rgba(#000, 0.87);
+$delete-action-color: rgba(#000, 0.87);
 $ripple-color: on-surface;
 $checkmark-size: 20px;
 $leading-icon-size: 20px;
-$trailing-action-size: 18px;
+$delete-action-size: 18px;
 $leading-padding: 12px;
 $trailing-padding: 12px;
 $avatar-size: 24px;
@@ -58,18 +50,14 @@ $avatar-leading-padding: 4px;
 $avatar-trailing-padding: 8px;
 $graphic-leading-padding: 6px;
 $graphic-trailing-padding: 6px;
-$trailing-action-leading-padding: 8px;
-$trailing-action-trailing-padding: 8px;
+$delete-action-leading-padding: 8px;
+$delete-action-trailing-padding: 8px;
 $ripple-target: '.md3-chip__ripple';
 $ripple-target-primary: '.md3-chip__ripple--primary';
-$ripple-target-trailing: '.md3-chip__ripple--trailing';
+$ripple-target-delete: '.md3-chip__ripple--delete';
 
 // Filter chip colors
-$filter-selected-container-color: color.mix(
-  theme-color.prop-value(on-surface),
-  $container-color,
-  8%
-);
+$filter-selected-container-color: color.mix(#000, $container-color, 8%);
 
 $_light-theme: (
   container-elevation: null,
@@ -178,40 +166,37 @@ $_light-theme: (
   with-leading-icon-leading-icon-color: null,
   with-leading-icon-leading-icon-size: null,
   with-leading-icon-pressed-leading-icon-color: null,
-  with-trailing-icon-disabled-trailing-icon-color: null,
-  with-trailing-icon-disabled-trailing-icon-opacity: null,
-  with-trailing-icon-focus-trailing-icon-color: null,
-  with-trailing-icon-hover-trailing-icon-color: null,
-  with-trailing-icon-pressed-trailing-icon-color: null,
-  with-trailing-icon-trailing-icon-color: null,
-  with-trailing-icon-trailing-icon-size: null,
+  with-delete-icon-disabled-delete-icon-color: null,
+  with-delete-icon-disabled-delete-icon-opacity: null,
+  with-delete-icon-focus-delete-icon-color: null,
+  with-delete-icon-hover-delete-icon-color: null,
+  with-delete-icon-pressed-delete-icon-color: null,
+  with-delete-icon-delete-icon-color: null,
+  with-delete-icon-delete-icon-size: null,
 );
 $_custom-property-prefix: 'chip';
 
 @mixin theme($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme($_light-theme, $theme);
   $theme: _resolve-theme($theme, $resolvers: $resolvers);
-  @include keys.declare-custom-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme-keys($_light-theme, $theme);
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
 
   @include _container-shape(map.get($theme, container-shape));
   @include _avatar-shape(map.get($theme, with-avatar-avatar-shape));
   @include graphic-size(map.get($theme, with-avatar-avatar-size));
   @include height(map.get($theme, container-height));
-  @include elevation-theme.theme-styles((
-    surface-tint-layer-color:
+  @include elevation-theme.theme-styles(
+    (
+      surface-tint-layer-color:
         map.get($theme, container-surface-tint-layer-color),
-  ));
+    )
+  );
   @include _container-elevation(
     map.get($resolvers, elevation),
     $shadow-color: map.get($theme, container-shadow-color),
@@ -389,13 +374,13 @@ $_custom-property-prefix: 'chip';
       pressed: map.get($theme, with-leading-icon-pressed-leading-icon-color),
     )
   );
-  @include trailing-action-color(
+  @include delete-action-color(
     (
-      disabled: map.get($theme, with-trailing-icon-disabled-trailing-icon-color),
-      focus: map.get($theme, with-trailing-icon-focus-trailing-icon-color),
-      hover: map.get($theme, with-trailing-icon-hover-trailing-icon-color),
-      enabled: map.get($theme, with-trailing-icon-trailing-icon-color),
-      pressed: map.get($theme, with-trailing-icon-pressed-trailing-icon-color),
+      disabled: map.get($theme, with-delete-icon-disabled-delete-icon-color),
+      focus: map.get($theme, with-delete-icon-focus-delete-icon-color),
+      hover: map.get($theme, with-delete-icon-hover-delete-icon-color),
+      enabled: map.get($theme, with-delete-icon-delete-icon-color),
+      pressed: map.get($theme, with-delete-icon-pressed-delete-icon-color),
     )
   );
   @include _ripple-theme(
@@ -467,7 +452,7 @@ $_custom-property-prefix: 'chip';
 
 @mixin _ripple-theme($ripple-theme) {
   .md3-chip__action--primary {
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: map.get($ripple-theme, focus-state-layer-color),
         focus-state-layer-opacity:
@@ -519,8 +504,8 @@ $_custom-property-prefix: 'chip';
 
 @mixin _ripple-color($color, $opacity-map) {
   .md3-chip__action--primary {
-    // TODO(kainby): Translate to md3 ripple
-    // @include ripple-theme.states(
+    // TODO(b/240224981): Translate to md3 ripple
+    // @include ripple.states(
     //   $color: $color,
     //   $opacity-map: $opacity-map,
     //   $ripple-target: $ripple-target
@@ -529,14 +514,14 @@ $_custom-property-prefix: 'chip';
 }
 
 ///
-/// Sets the ripple color of the chip's trailing action.
+/// Sets the ripple color of the chip's delete action.
 /// @param {Color} $color - The color of the ripple.
 /// @param {Map} $opacity-map [null] - The optional opacity map for the states.
 ///
-@mixin trailing-action-ripple-color($color, $opacity-map: null) {
-  .md3-chip__action--trailing {
-    // TODO(kainby): Translate to md3 ripple
-    // @include ripple-theme.states(
+@mixin delete-action-ripple-color($color, $opacity-map: null) {
+  .md3-chip__action--delete {
+    // TODO(b/240224981): Translate to md3 ripple
+    // @include ripple.states(
     //   $color: $color,
     //   $opacity-map: $opacity-map,
     //   $ripple-target: $ripple-target
@@ -545,11 +530,11 @@ $_custom-property-prefix: 'chip';
 }
 
 ///
-/// Sets the size of the trailing action's ripple.
+/// Sets the size of the delete action's ripple.
 /// @param {Number} $size - The size of the ripple.
 ///
-@mixin trailing-action-ripple-size($size) {
-  .md3-chip__ripple--trailing {
+@mixin delete-action-ripple-size($size) {
+  .md3-chip__ripple--delete {
     height: $size;
     width: $size;
   }
@@ -560,19 +545,19 @@ $_custom-property-prefix: 'chip';
 /// @param {Number | String} $density-scale - Density scale value for component.
 ///     Supported density scale values are `-2`, `-1`, `0`.
 ///
-@mixin density($density-scale) {
-  $height: density.prop-value(
-    $density-config: $density-config,
-    $density-scale: $density-scale,
-    $property-name: height,
-  );
+// @mixin density($density-scale) {
+//   $height: density.prop-value(
+//     $density-config: $density-config,
+//     $density-scale: $density-scale,
+//     $property-name: height,
+//   );
 
-  @include height($height);
+//   @include height($height);
 
-  @if $density-scale != 0 {
-    @include _reset-touch-target();
-  }
-}
+//   @if $density-scale != 0 {
+//     @include _reset-touch-target();
+//   }
+// }
 
 ///
 /// Resets touch target-related styles. This is called from the density mixin to
@@ -595,23 +580,23 @@ $_custom-property-prefix: 'chip';
 }
 
 @mixin _container-shape($radius) {
-  // TODO(kainby): Translate to md3 shape
+  // TODO(b/240224981): Translate to md3 shape
   // @include shape.radius($radius);
 
   #{$ripple-target} {
-    // TODO(kainby): Translate to md3 shape
+    // TODO(b/240224981): Translate to md3 shape
     // @include shape.radius($radius);
   }
 
   .md3-chip__action--primary:before {
-    // TODO(kainby): Translate to md3 shape
+    // TODO(b/240224981): Translate to md3 shape
     // @include shape.radius($radius);
   }
 }
 
 @mixin _avatar-shape($radius) {
   .md3-chip__icon--primary {
-    // TODO(kainby): Translate to md3 shape
+    // TODO(b/240224981): Translate to md3 shape
     // @include shape.radius($radius);
   }
 }
@@ -626,42 +611,42 @@ $_custom-property-prefix: 'chip';
   $rtl-reflexive: false,
   $density-scale: $density-scale
 ) {
-  $height: density.prop-value(
-    $density-config: $density-config,
-    $density-scale: $density-scale,
-    $property-name: height,
-  );
-
-// TODO(kainby): Translate to md3 shape
-//   @include shape.radius(
-//     $radius,
-//     $rtl-reflexive,
-//     $component-height: $height,
-//   );
-
-//   #{$ripple-target} {
-//     @include shape.radius(
-//       $radius,
-//       $rtl-reflexive,
-//       $component-height: $height,
-//     );
-//   }
-
-//   .md3-chip__action--primary:before {
-//     @include shape.radius(
-//       $radius,
-//       $rtl-reflexive,
-//       $component-height: $height,
-//     );
-//   }
-
-//   .md3-chip__icon--primary {
-//     @include shape.radius(
-//       $radius,
-//       $rtl-reflexive,
-//       $component-height: $height,
-//     );
-//   }
+  // $height: density.prop-value(
+  //   $density-config: $density-config,
+  //   $density-scale: $density-scale,
+  //   $property-name: height,
+  // );
+
+  // TODO(b/240224981): Translate to md3 shape
+  //   @include shape.radius(
+  //     $radius,
+  //     $rtl-reflexive,
+  //     $component-height: $height,
+  //   );
+
+  //   #{$ripple-target} {
+  //     @include shape.radius(
+  //       $radius,
+  //       $rtl-reflexive,
+  //       $component-height: $height,
+  //     );
+  //   }
+
+  //   .md3-chip__action--primary:before {
+  //     @include shape.radius(
+  //       $radius,
+  //       $rtl-reflexive,
+  //       $component-height: $height,
+  //     );
+  //   }
+
+  //   .md3-chip__icon--primary {
+  //     @include shape.radius(
+  //       $radius,
+  //       $rtl-reflexive,
+  //       $component-height: $height,
+  //     );
+  //   }
 }
 
 ///
@@ -699,13 +684,13 @@ $_custom-property-prefix: 'chip';
 /// @param {Color | Map} $color-or-map - The outline's color or a state Map
 ///
 @mixin outline-color($color-or-map) {
-  @include _outline-color(state.get-default-state($color-or-map));
+  @include _outline-color(map.get($color-or-map, default));
   @include _is-enabled() {
-    @include _outline-color(state.get-enabled-state($color-or-map));
+    @include _outline-color(map.get($color-or-map, enabled));
   }
-  @include _focus-outline-color(state.get-focus-state($color-or-map));
+  @include _focus-outline-color(map.get($color-or-map, focus));
   @include _is-disabled() {
-    @include _outline-color(state.get-disabled-state($color-or-map));
+    @include _outline-color(map.get($color-or-map, disabled));
   }
 }
 
@@ -756,8 +741,8 @@ $_custom-property-prefix: 'chip';
 
 @mixin _focus-outline-color($color) {
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // TODO(kainby): Translate to md3 ripple
-    // @include ripple-theme.focus() {
+    // TODO(b/240224981): Translate to md3 ripple
+    // @include ripple.focus() {
     //   &:before {
     //     @if $color {
     //       border-color: $color;
@@ -790,12 +775,12 @@ $_custom-property-prefix: 'chip';
 /// @param {Color | Map} $color-or-map - The container's color or a state Map
 ///
 @mixin container-color($color-or-map) {
-  @include _container-color(state.get-default-state($color-or-map));
+  @include _container-color(map.get($color-or-map, default));
   @include _is-enabled() {
-    @include _container-color(state.get-enabled-state($color-or-map));
+    @include _container-color(map.get($color-or-map, enabled));
   }
   @include _is-disabled() {
-    @include _container-color(state.get-disabled-state($color-or-map));
+    @include _container-color(map.get($color-or-map, disabled));
   }
 }
 
@@ -842,23 +827,23 @@ $_custom-property-prefix: 'chip';
 /// @param {Color | Map} $color-or-map - The label's color or a state Map
 ///
 @mixin text-label-color($color-or-map) {
-  @include _text-label-color(state.get-default-state($color-or-map));
+  @include _text-label-color(map.get($color-or-map, default));
   @include _is-enabled() {
-    @include _text-label-color(state.get-enabled-state($color-or-map));
+    @include _text-label-color(map.get($color-or-map, enabled));
   }
   .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
-    @include _text-label-color(state.get-hover-state($color-or-map));
+    @include _text-label-color(map.get($color-or-map, hover));
   }
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // TODO(kainby): Translate to md3 ripple
-    // @include ripple-theme.focus() {
-    //   @include _text-label-color(state.get-focus-state($color-or-map));
+    // TODO(b/240224981): Translate to md3 ripple
+    // @include ripple.focus() {
+    //   @include _text-label-color(map.get($color-or-map, focus));
     // }
   }
 
   @include _is-disabled() {
-    @include _text-label-color(state.get-disabled-state($color-or-map));
+    @include _text-label-color(map.get($color-or-map, disabled));
   }
 }
 
@@ -906,7 +891,7 @@ $_custom-property-prefix: 'chip';
 ///
 @mixin text-label-type-scale($type-scale) {
   .md3-chip__text-label {
-    // TODO(kainby): Translate to md3 typography
+    // TODO(b/240224981): Translate to md3 typography
     // @include typography.typography($type-scale);
   }
 }
@@ -948,25 +933,25 @@ $_custom-property-prefix: 'chip';
 /// @param {Color | Map} $color-or-map - The icon's color or a state Map
 ///
 @mixin icon-color($color-or-map) {
-  @include _icon-color(state.get-default-state($color-or-map));
+  @include _icon-color(map.get($color-or-map, default));
 
   @include _is-enabled() {
-    @include _icon-color(state.get-enabled-state($color-or-map));
+    @include _icon-color(map.get($color-or-map, enabled));
   }
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
-    @include _icon-color(state.get-hover-state($color-or-map));
+    @include _icon-color(map.get($color-or-map, hover));
   }
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // TODO(kainby): Translate to md3 ripple
-    // @include ripple-theme.focus() {
-    //   @include _icon-color(state.get-focus-state($color-or-map));
+    // TODO(b/240224981): Translate to md3 ripple
+    // @include ripple.focus() {
+    //   @include _icon-color(map.get($color-or-map, focus));
     // }
   }
 
   @include _is-disabled() {
-    @include _icon-color(state.get-disabled-state($color-or-map));
+    @include _icon-color(map.get($color-or-map, disabled));
   }
 }
 
@@ -999,29 +984,23 @@ $_custom-property-prefix: 'chip';
 /// @param {Color | Map} $color-or-map - The icon's container color or a state Map
 ///
 @mixin icon-container-color($color-or-map) {
-  @include _icon-container-color(
-    state.get-default-state($color-or-map)
-  );
+  @include _icon-container-color(map.get($color-or-map, default));
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
-    @include _icon-container-color(
-      state.get-hover-state($color-or-map)
-    );
+    @include _icon-container-color(map.get($color-or-map, hover));
   }
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // TODO(kainby): Translate to md3 ripple
-    // @include ripple-theme.focus() {
+    // TODO(b/240224981): Translate to md3 ripple
+    // @include ripple.focus() {
     //   @include _icon-container-color(
-    //     state.get-focus-state($color-or-map)
+    //     map.get($color-or-map, focus)
     //   );
     // }
   }
 
   &.md3-chip--disabled {
-    @include _icon-container-color(
-      state.get-disabled-state($color-or-map)
-    );
+    @include _icon-container-color(map.get($color-or-map, disabled));
   }
 }
 
@@ -1046,11 +1025,11 @@ $_custom-property-prefix: 'chip';
 }
 
 ///
-/// Sets the size of the trailing action.
-/// @param {Number} $size - The size of the trailing action.
+/// Sets the size of the delete action.
+/// @param {Number} $size - The size of the delete action.
 ///
-@mixin trailing-action-size($size) {
-  .md3-chip__icon--trailing {
+@mixin delete-action-size($size) {
+  .md3-chip__icon--delete {
     height: $size;
     width: $size;
     font-size: $size;
@@ -1058,52 +1037,44 @@ $_custom-property-prefix: 'chip';
 }
 
 ///
-/// Customizes the trailing action color, using a Color or state Map.
+/// Customizes the delete action color, using a Color or state Map.
 /// - To set only the default color, provide a single Color.
 /// - To set one or more state colors, provide a state Map with optional keys.
 /// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.
 ///
 /// @example
-///   @include trailing-action-color(blue);
-///   @include trailing-action-color((disabled: gray));
+///   @include delete-action-color(blue);
+///   @include delete-action-color((disabled: gray));
 ///
-/// @param {Color | Map} $color-or-map - The trailing action's color or a state Map
+/// @param {Color | Map} $color-or-map - The delete action's color or a state Map
 ///
-@mixin trailing-action-color($color-or-map) {
-  @include _trailing-action-color(
-    state.get-default-state($color-or-map)
-  );
+@mixin delete-action-color($color-or-map) {
+  @include _delete-action-color(map.get($color-or-map, default));
 
   @include _is-enabled() {
-    @include _trailing-action-color(
-      state.get-enabled-state($color-or-map)
-    );
+    @include _delete-action-color(map.get($color-or-map, enabled));
   }
 
-  .md3-chip__action--trailing:hover {
-    @include _trailing-action-color(
-      state.get-hover-state($color-or-map)
-    );
+  .md3-chip__action--delete:hover {
+    @include _delete-action-color(map.get($color-or-map, hover));
   }
 
-  .md3-chip__action--trailing {
-    // TODO(kainby): Translate to md3 ripple
-    // @include ripple-theme.focus() {
-    //   @include _trailing-action-color(
-    //     state.get-focus-state($color-or-map)
+  .md3-chip__action--delete {
+    // TODO(b/240224981): Translate to md3 ripple
+    // @include ripple.focus() {
+    //   @include _delete-action-color(
+    //     map.get($color-or-map, focus)
     //   );
     // }
   }
 
   @include _is-disabled() {
-    @include _trailing-action-color(
-      state.get-disabled-state($color-or-map)
-    );
+    @include _delete-action-color(map.get($color-or-map, disabled));
   }
 }
 
-@mixin _trailing-action-color($color) {
-  .md3-chip__icon--trailing {
+@mixin _delete-action-color($color) {
+  .md3-chip__icon--delete {
     @if $color {
       color: $color;
     }
@@ -1134,25 +1105,25 @@ $_custom-property-prefix: 'chip';
 /// @param {Color | Map} $color-or-map - The checkmark's color or a state Map
 ///
 @mixin checkmark-color($color-or-map) {
-  @include _checkmark-color(state.get-default-state($color-or-map));
+  @include _checkmark-color(map.get($color-or-map, default));
 
   @include _is-enabled() {
-    @include _checkmark-color(state.get-enabled-state($color-or-map));
+    @include _checkmark-color(map.get($color-or-map, enabled));
   }
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
-    @include _checkmark-color(state.get-hover-state($color-or-map));
+    @include _checkmark-color(map.get($color-or-map, hover));
   }
 
   .md3-chip__action--primary {
-    // TODO(kainby): Translate to md3 ripple
-    // @include ripple-theme.focus() {
-    //   @include _checkmark-color(state.get-focus-state($color-or-map));
+    // TODO(b/240224981): Translate to md3 ripple
+    // @include ripple.focus() {
+    //   @include _checkmark-color(map.get($color-or-map, focus));
     // }
   }
 
   @include _is-disabled() {
-    @include _checkmark-color(state.get-disabled-state($color-or-map));
+    @include _checkmark-color(map.get($color-or-map, disabled));
   }
 }
 
@@ -1177,14 +1148,10 @@ $_custom-property-prefix: 'chip';
 /// @param {Color | Map} $color-or-map - The checkmark container's color or a state Map
 ///
 @mixin checkmark-container-color($color-or-map) {
-  @include _checkmark-container-color(
-    state.get-default-state($color-or-map)
-  );
+  @include _checkmark-container-color(map.get($color-or-map, default));
 
   &.md3-chip--disabled {
-    @include _checkmark-container-color(
-      state.get-disabled-state($color-or-map)
-    );
+    @include _checkmark-container-color(map.get($color-or-map, disabled));
   }
 }
 
@@ -1220,7 +1187,7 @@ $_custom-property-prefix: 'chip';
 ) {
   &.md3-chip--with-primary-graphic {
     .md3-chip__graphic {
-       padding-inline: $graphic-leading $graphic-trailing;
+      padding-inline: $graphic-leading $graphic-trailing;
     }
 
     .md3-chip__action--primary {
@@ -1230,23 +1197,23 @@ $_custom-property-prefix: 'chip';
 }
 
 ///
-/// Sets the horizontal padding for chips with a trailing action.
+/// Sets the horizontal padding for chips with a delete action.
 /// @param {Number} $primary-leading - The leading padding for the primary action.
-/// @param {Number} $trailing-action-leading - The leading padding for the trailing action.
-/// @param {Number} $trailing-action-trailing - The trailing padding for the trailing action.
+/// @param {Number} $delete-action-leading - The leading padding for the delete action.
+/// @param {Number} $delete-action-trailing - The trailing padding for the delete action.
 ///
-@mixin with-trailing-action-horizontal-padding(
+@mixin with-delete-action-horizontal-padding(
   $primary-leading,
-  $trailing-action-leading,
-  $trailing-action-trailing
+  $delete-action-leading,
+  $delete-action-trailing
 ) {
-  &.md3-chip--with-trailing-action {
-    .md3-chip__action--trailing {
-      padding-inline: $trailing-action-leading $trailing-action-trailing;
+  &.md3-chip--with-delete-action {
+    .md3-chip__action--delete {
+      padding-inline: $delete-action-leading $delete-action-trailing;
     }
 
-    #{$ripple-target-trailing} {
-      inset-inline-start: $trailing-action-leading;
+    #{$ripple-target-delete} {
+      inset-inline-start: $delete-action-leading;
     }
 
     .md3-chip__action--primary {
@@ -1256,29 +1223,29 @@ $_custom-property-prefix: 'chip';
 }
 
 ///
-/// Sets the horizontal padding for chips with a graphic and trailing action.
+/// Sets the horizontal padding for chips with a graphic and delete action.
 /// @param {Number} $graphic-leading - The leading padding for the graphic.
 /// @param {Number} $graphic-trailing - The trailing padding for the graphic.
-/// @param {Number} $trailing-action-leading - The leading padding for the trailing action.
-/// @param {Number} $trailing-action-trailing - The trailing padding for the trailing action.
+/// @param {Number} $delete-action-leading - The leading padding for the delete action.
+/// @param {Number} $delete-action-trailing - The trailing padding for the delete action.
 ///
-@mixin with-graphic-and-trailing-action-horizontal-padding(
+@mixin with-graphic-and-delete-action-horizontal-padding(
   $graphic-leading,
   $graphic-trailing,
-  $trailing-action-leading,
-  $trailing-action-trailing
+  $delete-action-leading,
+  $delete-action-trailing
 ) {
-  &.md3-chip--with-primary-graphic.md3-chip--with-trailing-action {
+  &.md3-chip--with-primary-graphic.md3-chip--with-delete-action {
     .md3-chip__graphic {
       padding-inline: $graphic-leading $graphic-trailing;
     }
 
-    .md3-chip__action--trailing {
-      padding-inline: $trailing-action-leading $trailing-action-trailing;
+    .md3-chip__action--delete {
+      padding-inline: $delete-action-leading $delete-action-trailing;
     }
 
-    #{$ripple-target-trailing} {
-      inset-inline-start: $trailing-action-leading;
+    #{$ripple-target-delete} {
+      inset-inline-start: $delete-action-leading;
     }
 
     .md3-chip__action--primary {
@@ -1288,8 +1255,12 @@ $_custom-property-prefix: 'chip';
 }
 
 @mixin _container-elevation($resolver, $shadow-color, $map) {
-  // TODO(kainby): Use M3 resolver.
-  @include elevation-theme.theme-styles((shadow: $shadow-color));
+  // TODO(b/240224981): Use M3 resolver.
+  @include elevation-theme.theme-styles(
+    (
+      shadow: $shadow-color,
+    )
+  );
 }
 
 @mixin _selected-container-elevation($resolver, $shadow-color, $map) {