@material/web 1.0.0-pre.4 → 1.0.0-pre.5

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

@@ -1,1285 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Selector '.md3-*' should only be used in this project.
-// stylelint-disable selector-class-pattern --
-// Internal styling for Chip MDC component.
-
-// go/keep-sorted start
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:math';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../../elevation/lib/elevation';
-@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';
-// go/keep-sorted end
-
-$height: 32px;
-$minimum-height: 24px;
-$maximum-height: $height;
-$density-scale: 0;
-$density-config: (
-  height: (
-    default: $height,
-    maximum: $maximum-height,
-    minimum: $minimum-height,
-  ),
-);
-$radius: math.div($height, 2);
-$type-scale: body2;
-$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;
-$delete-action-size: 18px;
-$leading-padding: 12px;
-$trailing-padding: 12px;
-$avatar-size: 24px;
-$avatar-leading-padding: 4px;
-$avatar-trailing-padding: 8px;
-$graphic-leading-padding: 6px;
-$graphic-trailing-padding: 6px;
-$delete-action-leading-padding: 8px;
-$delete-action-trailing-padding: 8px;
-$ripple-target: '.md3-chip__ripple';
-$ripple-target-primary: '.md3-chip__ripple--primary';
-$ripple-target-delete: '.md3-chip__ripple--delete';
-
-// Filter chip colors
-$filter-selected-container-color: color.mix(#000, $container-color, 8%);
-
-$_light-theme: (
-  container-elevation: null,
-  container-height: null,
-  container-shadow-color: null,
-  container-shape: null,
-  disabled-label-text-color: null,
-  disabled-label-text-opacity: null,
-  disabled-outline-color: null,
-  disabled-outline-opacity: null,
-  elevated-container-color: null,
-  elevated-container-elevation: null,
-  elevated-container-shadow-color: null,
-  container-surface-tint-layer-color: null,
-  elevated-disabled-container-color: null,
-  elevated-disabled-container-elevation: null,
-  elevated-disabled-container-opacity: null,
-  elevated-focus-container-elevation: null,
-  elevated-hover-container-elevation: null,
-  elevated-pressed-container-elevation: null,
-  elevated-selected-container-color: null,
-  elevated-selected-container-elevation: null,
-  elevated-unselected-container-color: null,
-  flat-container-elevation: null,
-  flat-disabled-outline-color: null,
-  flat-disabled-outline-opacity: null,
-  flat-disabled-selected-outline-color: null,
-  flat-disabled-selected-outline-opacity: null,
-  flat-disabled-unselected-outline-color: null,
-  flat-disabled-unselected-outline-opacity: null,
-  flat-focus-outline-color: null,
-  flat-outline-color: null,
-  flat-outline-width: null,
-  flat-selected-container-color: null,
-  flat-selected-focus-container-elevation: null,
-  flat-selected-hover-container-elevation: null,
-  flat-selected-outline-color: null,
-  flat-selected-outline-width: null,
-  flat-selected-pressed-container-elevation: null,
-  flat-unselected-focus-container-elevation: null,
-  flat-unselected-focus-outline-color: null,
-  flat-unselected-hover-container-elevation: null,
-  flat-unselected-outline-color: null,
-  flat-unselected-outline-width: null,
-  flat-unselected-pressed-container-elevation: null,
-  focus-label-text-color: null,
-  focus-outline-color: null,
-  focus-state-layer-color: null,
-  focus-state-layer-opacity: null,
-  hover-label-text-color: null,
-  hover-state-layer-color: null,
-  hover-state-layer-opacity: null,
-  label-text-color: null,
-  label-text-font: null,
-  label-text-line-height: null,
-  label-text-size: null,
-  label-text-tracking: null,
-  label-text-weight: null,
-  outline-color: null,
-  outline-width: null,
-  pressed-label-text-color: null,
-  pressed-state-layer-color: null,
-  pressed-state-layer-opacity: null,
-  selected-focus-label-text-color: null,
-  selected-focus-state-layer-color: null,
-  selected-focus-state-layer-opacity: null,
-  selected-hover-label-text-color: null,
-  selected-hover-state-layer-color: null,
-  selected-hover-state-layer-opacity: null,
-  selected-label-text-color: null,
-  selected-pressed-label-text-color: null,
-  selected-pressed-state-layer-color: null,
-  selected-pressed-state-layer-opacity: null,
-  unselected-focus-label-text-color: null,
-  unselected-focus-state-layer-color: null,
-  unselected-focus-state-layer-opacity: null,
-  unselected-hover-label-text-color: null,
-  unselected-hover-state-layer-color: null,
-  unselected-hover-state-layer-opacity: null,
-  unselected-label-text-color: null,
-  unselected-pressed-label-text-color: null,
-  unselected-pressed-state-layer-color: null,
-  unselected-pressed-state-layer-opacity: null,
-  with-avatar-avatar-shape: null,
-  with-avatar-avatar-size: null,
-  with-avatar-disabled-avatar-opacity: null,
-  with-icon-disabled-icon-color: null,
-  with-icon-disabled-icon-opacity: null,
-  with-icon-focus-icon-color: null,
-  with-icon-hover-icon-color: null,
-  with-icon-icon-color: null,
-  with-icon-icon-size: null,
-  with-icon-pressed-icon-color: null,
-  with-icon-selected-focus-icon-color: null,
-  with-icon-selected-hover-icon-color: null,
-  with-icon-selected-icon-color: null,
-  with-icon-selected-pressed-icon-color: null,
-  with-icon-unselected-focus-icon-color: null,
-  with-icon-unselected-hover-icon-color: null,
-  with-icon-unselected-icon-color: null,
-  with-icon-unselected-pressed-icon-color: null,
-  with-leading-icon-disabled-leading-icon-color: null,
-  with-leading-icon-disabled-leading-icon-opacity: null,
-  with-leading-icon-focus-leading-icon-color: null,
-  with-leading-icon-hover-leading-icon-color: null,
-  with-leading-icon-leading-icon-color: null,
-  with-leading-icon-leading-icon-size: null,
-  with-leading-icon-pressed-leading-icon-color: 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);
-  $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: 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(
-    (
-      shadow-color: map.get($theme, elevated-container-shadow-color),
-      surface-tint: map.get($theme, container-surface-tint-layer-color),
-    )
-  );
-  @include _container-elevation(
-    map.get($resolvers, elevation),
-    $shadow-color: map.get($theme, container-shadow-color),
-    $map: (default: map.get($theme, container-elevation))
-  );
-  @include _container-elevation(
-    map.get($resolvers, elevation),
-    $shadow-color: map.get($theme, flat-container-shadow-color),
-    $map: (enabled: map.get($theme, flat-container-elevation))
-  );
-  @include _container-elevation(
-    map.get($resolvers, elevation),
-    $shadow-color: map.get($theme, elevated-container-shadow-color),
-    $map: (
-      enabled: map.get($theme, elevated-container-elevation),
-      disabled: map.get($theme, elevated-disabled-container-elevation),
-      hover: map.get($theme, elevated-hover-container-elevation),
-      focus: map.get($theme, elevated-focus-container-elevation),
-      pressed: map.get($theme, elevated-pressed-container-elevation)
-    )
-  );
-  @include _selected-container-elevation(
-    map.get($resolvers, elevation),
-    $shadow-color: map.get($theme, elevated-container-shadow-color),
-    $map: (
-      enabled: map.get($theme, elevated-selected-container-elevation),
-      disabled: map.get($theme, elevated-selected-disabled-container-elevation),
-      hover: map.get($theme, elevated-selected-hover-container-elevation),
-      focus: map.get($theme, elevated-selected-focus-container-elevation),
-      pressed: map.get($theme, elevated-selected-pressed-container-elevation)
-    )
-  );
-  @include _selected-container-elevation(
-    map.get($resolvers, elevation),
-    $shadow-color: map.get($theme, elevated-container-shadow-color),
-    $map: (
-      enabled: map.get($theme, flat-selected-container-elevation),
-      disabled: map.get($theme, flat-selected-disabled-container-elevation),
-      hover: map.get($theme, flat-selected-hover-container-elevation),
-      focus: map.get($theme, flat-selected-focus-container-elevation),
-      pressed: map.get($theme, flat-selected-pressed-container-elevation)
-    )
-  );
-  @include _unselected-container-elevation(
-    map.get($resolvers, elevation),
-    $shadow-color: map.get($theme, elevated-container-shadow-color),
-    $map: (
-      enabled: map.get($theme, flat-unselected-container-elevation),
-      disabled: map.get($theme, flat-unselected-disabled-container-elevation),
-      hover: map.get($theme, flat-unselected-hover-container-elevation),
-      focus: map.get($theme, flat-unselected-focus-container-elevation),
-      pressed: map.get($theme, flat-unselected-pressed-container-elevation)
-    )
-  );
-  @include outline-color(
-    (
-      enabled: map.get($theme, flat-outline-color),
-      focus: map.get($theme, flat-focus-outline-color),
-      disabled: map.get($theme, flat-disabled-outline-color),
-    )
-  );
-  @include selected-outline-color(
-    (
-      enabled: map.get($theme, flat-selected-outline-color),
-      disabled: map.get($theme, flat-disabled-selected-outline-color),
-    )
-  );
-  @include _unselected-outline-color(
-    (
-      disabled: map.get($theme, flat-disabled-unselected-outline-color),
-      focus: map.get($theme, flat-unselected-focus-outline-color),
-      enabled: map.get($theme, flat-unselected-outline-color),
-    )
-  );
-  @include outline-width(map.get($theme, outline-width));
-  @include outline-width(map.get($theme, flat-outline-width));
-  @include _selected-outline-width(
-    map.get($theme, flat-selected-outline-width)
-  );
-  @include _unselected-outline-width(
-    map.get($theme, flat-unselected-outline-width)
-  );
-  @include container-color(
-    (
-      enabled: map.get($theme, elevated-container-color),
-      disabled: map.get($theme, elevated-disabled-container-color),
-    )
-  );
-  @include selected-container-color(
-    (
-      enabled: map.get($theme, elevated-selected-container-color),
-    )
-  );
-  @include selected-container-color(
-    (
-      enabled: map.get($theme, flat-selected-container-color),
-    )
-  );
-  @include _unselected-container-color(
-    (
-      enabled: map.get($theme, elevated-unselected-container-color),
-    )
-  );
-  @include _label-text-typography(
-    (
-      font: map.get($theme, label-text-font),
-      line-height: map.get($theme, label-text-line-height),
-      size: map.get($theme, label-text-size),
-      weight: map.get($theme, label-text-weight),
-      tracking: map.get($theme, label-text-tracking),
-    )
-  );
-  @include text-label-color(
-    (
-      enabled: map.get($theme, label-text-color),
-      hover: map.get($theme, hover-label-text-color),
-      focus: map.get($theme, focus-label-text-color),
-      pressed: map.get($theme, pressed-label-text-color),
-      disabled: map.get($theme, disabled-label-text-color),
-    )
-  );
-  @include selected-text-label-color(
-    (
-      enabled: map.get($theme, selected-label-text-color),
-      hover: map.get($theme, selected-hover-label-text-color),
-      focus: map.get($theme, selected-focus-label-text-color),
-      pressed: map.get($theme, selected-pressed-label-text-color),
-      disabled: map.get($theme, selected-disabled-label-text-color),
-    )
-  );
-  @include _unselected-text-label-color(
-    (
-      enabled: map.get($theme, unselected-label-text-color),
-      hover: map.get($theme, unselected-hover-label-text-color),
-      focus: map.get($theme, unselected-focus-label-text-color),
-      pressed: map.get($theme, unselected-pressed-label-text-color),
-      disabled: map.get($theme, unselected-disabled-label-text-color),
-    )
-  );
-
-  @include icon-size(map.get($theme, with-icon-icon-size));
-  @include icon-color(
-    (
-      enabled: map.get($theme, with-icon-icon-color),
-      disabled: map.get($theme, with-icon-disabled-icon-color),
-      hover: map.get($theme, with-icon-hover-icon-color),
-      focus: map.get($theme, with-icon-focus-icon-color),
-      pressed: map.get($theme, with-icon-pressed-icon-color),
-    )
-  );
-  @include _selected-icon-color(
-    (
-      enabled: map.get($theme, with-icon-selected-icon-color),
-      disabled: map.get($theme, with-icon-selected-disabled-icon-color),
-      hover: map.get($theme, with-icon-selected-hover-icon-color),
-      focus: map.get($theme, with-icon-selected-focus-icon-color),
-      pressed: map.get($theme, with-icon-selected-pressed-icon-color),
-    )
-  );
-  @include _unselected-icon-color(
-    (
-      enabled: map.get($theme, with-icon-unselected-icon-color),
-      disabled: map.get($theme, with-icon-unselected-disabled-icon-color),
-      hover: map.get($theme, with-icon-unselected-hover-icon-color),
-      focus: map.get($theme, with-icon-unselected-focus-icon-color),
-      pressed: map.get($theme, with-icon-unselected-pressed-icon-color),
-    )
-  );
-  @include icon-color(
-    (
-      disabled: map.get($theme, with-leading-icon-disabled-leading-icon-color),
-      focus: map.get($theme, with-leading-icon-focus-leading-icon-color),
-      hover: map.get($theme, with-leading-icon-hover-leading-icon-color),
-      enabled: map.get($theme, with-leading-icon-leading-icon-color),
-      pressed: map.get($theme, with-leading-icon-pressed-leading-icon-color),
-    )
-  );
-  @include delete-action-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(
-    (
-      focus-color: map.get($theme, focus-state-layer-color),
-      focus-opacity: map.get($theme, focus-state-layer-opacity),
-      hover-color: map.get($theme, hover-state-layer-color),
-      hover-opacity: map.get($theme, hover-state-layer-opacity),
-      pressed-color: map.get($theme, pressed-state-layer-color),
-      pressed-opacity: map.get($theme, pressed-state-layer-opacity),
-    )
-  );
-  @include _selected-ripple-theme(
-    (
-      focus-color: map.get($theme, selected-focus-state-layer-color),
-      focus-opacity: map.get($theme, selected-focus-state-layer-opacity),
-      hover-color: map.get($theme, selected-hover-state-layer-color),
-      hover-opacity: map.get($theme, selected-hover-state-layer-opacity),
-      pressed-color: map.get($theme, selected-pressed-state-layer-color),
-      pressed-opacity: map.get($theme, selected-pressed-state-layer-opacity),
-    )
-  );
-  @include _unselected-ripple-theme(
-    (
-      focus-color: map.get($theme, unselected-focus-state-layer-color),
-      focus-opacity: map.get($theme, unselected-focus-state-layer-opacity),
-      hover-color: map.get($theme, unselected-hover-state-layer-color),
-      hover-opacity: map.get($theme, unselected-hover-state-layer-opacity),
-      pressed-color: map.get($theme, unselected-pressed-state-layer-color),
-      pressed-opacity: map.get($theme, unselected-pressed-state-layer-opacity),
-    )
-  );
-}
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: elevation.resolve-tokens(
-    $theme,
-    'container-elevation',
-    'elevated-container-elevation',
-    'elevated-disabled-container-elevation',
-    'elevated-focus-container-elevation',
-    'elevated-hover-container-elevation',
-    'elevated-pressed-container-elevation',
-    'elevated-selected-container-elevation',
-    'flat-container-elevation',
-    'flat-selected-focus-container-elevation',
-    'flat-selected-hover-container-elevation',
-    'flat-selected-pressed-container-elevation',
-    'flat-unselected-focus-container-elevation',
-    'flat-unselected-hover-container-elevation',
-    'flat-unselected-pressed-container-elevation'
-  );
-  @return $theme;
-}
-
-@mixin _ripple-theme($ripple-theme) {
-  .md3-chip__action--primary {
-    @include ripple.theme(
-      (
-        focus-color: map.get($ripple-theme, focus-state-layer-color),
-        focus-opacity: map.get($ripple-theme, focus-state-layer-opacity),
-        hover-color: map.get($ripple-theme, hover-state-layer-color),
-        hover-opacity: map.get($ripple-theme, hover-state-layer-opacity),
-        pressed-color: map.get($ripple-theme, pressed-state-layer-color),
-        pressed-opacity: map.get($ripple-theme, pressed-state-layer-opacity),
-      ),
-      $ripple-target: $ripple-target
-    );
-  }
-}
-
-@mixin _selected-ripple-theme($ripple-theme) {
-  @include _is-selected() {
-    @include _ripple-theme($ripple-theme);
-  }
-}
-
-@mixin _unselected-ripple-theme($ripple-theme) {
-  @include _is-unselected() {
-    @include _ripple-theme($ripple-theme);
-  }
-}
-
-///
-/// Sets the ripple color of the chip.
-/// @param {Color} $color - The color of the ripple.
-/// @param {Map} $opacity-map [null] - The optional opacity map for the states.
-///
-@mixin ripple-color($color, $opacity-map: null) {
-  @include _ripple-color($color, $opacity-map);
-}
-
-///
-/// Sets the selected ripple color of the chip.
-/// @param {Color} $color - The color of the ripple.
-/// @param {Map} $opacity-map [null] - The optional opacity map for the states.
-///
-@mixin selected-ripple-color($color, $opacity-map: null) {
-  &.md3-chip--selected {
-    @include ripple-color($color, $opacity-map);
-  }
-}
-
-@mixin _ripple-color($color, $opacity-map) {
-  .md3-chip__action--primary {
-    // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple.states(
-    //   $color: $color,
-    //   $opacity-map: $opacity-map,
-    //   $ripple-target: $ripple-target
-    // );
-  }
-}
-
-///
-/// 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 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
-    // );
-  }
-}
-
-///
-/// Sets the size of the delete action's ripple.
-/// @param {Number} $size - The size of the ripple.
-///
-@mixin delete-action-ripple-size($size) {
-  .md3-chip__ripple--delete {
-    height: $size;
-    width: $size;
-  }
-}
-
-///
-/// Sets the density scale for the 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,
-//   );
-
-//   @include height($height);
-
-//   @if $density-scale != 0 {
-//     @include _reset-touch-target();
-//   }
-// }
-
-///
-/// Resets touch target-related styles. This is called from the density mixin to
-/// automatically remove the increased touch target, since dense components
-/// don't have the same default a11y requirements.
-/// @access private
-///
-@mixin _reset-touch-target() {
-  .md3-chip__action-touch {
-    display: none;
-  }
-}
-
-///
-/// Sets custom height for the chip.
-/// @param {Number} $height - The height of the chip.
-///
-@mixin height($height) {
-  height: $height;
-}
-
-@mixin _container-shape($radius) {
-  // TODO(b/240224981): Translate to md3 shape
-  // @include shape.radius($radius);
-
-  #{$ripple-target} {
-    // TODO(b/240224981): Translate to md3 shape
-    // @include shape.radius($radius);
-  }
-
-  .md3-chip__action--primary:before {
-    // TODO(b/240224981): Translate to md3 shape
-    // @include shape.radius($radius);
-  }
-}
-
-@mixin _avatar-shape($radius) {
-  .md3-chip__icon--primary {
-    // TODO(b/240224981): Translate to md3 shape
-    // @include shape.radius($radius);
-  }
-}
-
-///
-/// Sets the shape radius of the chip.
-/// @param {Number|List} $radius - Shape radius in `border-radius` CSS format.
-/// @param {Boolean} $rtl-reflexive - True flips radius corners in RTL.
-///
-@mixin shape-radius(
-  $radius,
-  $rtl-reflexive: false,
-  $density-scale: $density-scale
-) {
-  // $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,
-  //     );
-  //   }
-}
-
-///
-/// Sets the width of the chip outline.
-/// @param {Number} $width - The width of the chip outline.
-///
-@mixin outline-width($width) {
-  .md3-chip__action--primary:before {
-    border-width: $width;
-  }
-}
-
-@mixin _selected-outline-width($width) {
-  @include _is-selected() {
-    @include outline-width($width);
-  }
-}
-
-@mixin _unselected-outline-width($width) {
-  @include _is-unselected() {
-    @include outline-width($width);
-  }
-}
-
-///
-/// Customizes the outline 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`, `enabled`, `focus`, `disabled`.
-///
-/// @example
-///   @include outline-color(blue);
-///   @include outline-color((disabled: gray));
-///
-/// @param {Color | Map} $color-or-map - The outline's color or a state Map
-///
-@mixin outline-color($color-or-map) {
-  @include _outline-color(map.get($color-or-map, default));
-  @include _is-enabled() {
-    @include _outline-color(map.get($color-or-map, enabled));
-  }
-  @include _focus-outline-color(map.get($color-or-map, focus));
-  @include _is-disabled() {
-    @include _outline-color(map.get($color-or-map, disabled));
-  }
-}
-
-@mixin _selected-outline-color($color-or-map) {
-  @include _is-selected() {
-    @include _outline-color($color-or-map);
-  }
-}
-
-///
-/// Customizes the selected outline 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`, `enabled`, `focus`, `disabled`.
-///
-/// @example
-///   @include selected-outline-color(blue);
-///   @include selected-outline-color((disabled: gray));
-///
-/// @param {Color | Map} $color-or-map - The outline's color or a state Map
-///
-@mixin selected-outline-color($color-or-map) {
-  @include _is-selected() {
-    @include outline-color($color-or-map);
-  }
-}
-
-@mixin _unselected-outline-color($color-or-map) {
-  @include _is-unselected() {
-    @include outline-color($color-or-map);
-  }
-}
-
-@mixin _outline-color($color) {
-  .md3-chip__action--primary:before {
-    @if $color {
-      border-color: $color;
-    }
-
-    // TODO(b/206694742): Find a better solution.
-    @if $color == transparent {
-      @include dom.forced-colors-mode() {
-        border-color: CanvasText;
-      }
-    }
-  }
-}
-
-@mixin _focus-outline-color($color) {
-  .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple.focus() {
-    //   &:before {
-    //     @if $color {
-    //       border-color: $color;
-    //     }
-    //   }
-    // }
-  }
-}
-
-///
-/// Sets the style of the chip outline.
-/// @param {String} $style - The style of the chip outline.
-///
-@mixin outline-style($style) {
-  .md3-chip__action--primary:before {
-    border-style: $style;
-  }
-}
-
-///
-/// Customizes the container 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`, `enabled`, `disabled`.
-///
-/// @example
-///   @include container-color(blue);
-///   @include container-color((disabled: gray));
-///
-/// @param {Color | Map} $color-or-map - The container's color or a state Map
-///
-@mixin container-color($color-or-map) {
-  @include _container-color(map.get($color-or-map, default));
-  @include _is-enabled() {
-    @include _container-color(map.get($color-or-map, enabled));
-  }
-  @include _is-disabled() {
-    @include _container-color(map.get($color-or-map, disabled));
-  }
-}
-
-///
-/// Customizes the selected container 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`, `enabled`, `disabled`.
-///
-/// @example
-///   @include selected-container-color(blue);
-///   @include selected-container-color((disabled: gray));
-///
-/// @param {Color | Map} $color-or-map - The container's color or a state Map
-///
-@mixin selected-container-color($color-or-map) {
-  @include _is-selected() {
-    @include container-color($color-or-map);
-  }
-}
-
-@mixin _unselected-container-color($color-or-map) {
-  @include _is-unselected() {
-    @include container-color($color-or-map);
-  }
-}
-
-@mixin _container-color($color) {
-  @if $color {
-    background-color: $color;
-  }
-}
-
-///
-/// Customizes the text label 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`, `enabled`, `hover`, `focus`, `disabled`.
-///
-/// @example
-///   @include text-label-color(blue);
-///   @include text-label-color((disabled: gray));
-///
-/// @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(map.get($color-or-map, default));
-  @include _is-enabled() {
-    @include _text-label-color(map.get($color-or-map, enabled));
-  }
-  .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
-    @include _text-label-color(map.get($color-or-map, hover));
-  }
-
-  .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // 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(map.get($color-or-map, disabled));
-  }
-}
-
-@mixin _label-text-typography($typography-theme) {
-  .md3-chip__text-label {
-    @include typography.theme-styles($typography-theme);
-  }
-}
-
-///
-/// Customizes the selected text label 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 selected-text-label-color(blue);
-///   @include selected-text-label-color((disabled: gray));
-///
-/// @param {Color | Map} $color-or-map - The label's color or a state Map
-///
-@mixin selected-text-label-color($color-or-map) {
-  @include _is-selected() {
-    @include text-label-color($color-or-map);
-  }
-}
-
-@mixin _unselected-text-label-color($color-or-map) {
-  @include _is-unselected() {
-    @include text-label-color($color-or-map);
-  }
-}
-
-@mixin _text-label-color($color) {
-  .md3-chip__text-label {
-    @if $color {
-      color: $color;
-    }
-  }
-}
-
-///
-/// Sets the type scale of the text label.
-/// @param {String} $type-scale - The type scale of the text label.
-///
-@mixin text-label-type-scale($type-scale) {
-  .md3-chip__text-label {
-    // TODO(b/240224981): Translate to md3 typography
-    // @include typography.typography($type-scale);
-  }
-}
-
-///
-/// Sets the size of the graphic.
-/// @param {Number} $size - The size of the graphic.
-///
-@mixin graphic-size($size) {
-  // Expose the width as a readable custom property that can be used when
-  // computing the chip bounding client rect as an additive value for the chip
-  // width. This solves for selectable chips without icons growing/shrinking as
-  // they toggle their selected state. The ripple dimensions will have been
-  // computed based on the unselected bounding client react which will not have
-  // enough horizontal space to account for the growth in width.
-  &.md3-chip--selectable:not(.md3-chip--with-primary-icon) {
-    @if $size {
-      @include theme.property(--md3-chip-graphic-selected-width, $size);
-    }
-  }
-
-  .md3-chip__graphic {
-    height: $size;
-    width: $size;
-    font-size: $size;
-  }
-}
-
-///
-/// Customizes the icon 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`, `enabled`, `focus`, `disabled`.
-///
-/// @example
-///   @include icon-color(blue);
-///   @include icon-color((disabled: gray));
-///
-/// @param {Color | Map} $color-or-map - The icon's color or a state Map
-///
-@mixin icon-color($color-or-map) {
-  @include _icon-color(map.get($color-or-map, default));
-
-  @include _is-enabled() {
-    @include _icon-color(map.get($color-or-map, enabled));
-  }
-
-  .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
-    @include _icon-color(map.get($color-or-map, hover));
-  }
-
-  .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // 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(map.get($color-or-map, disabled));
-  }
-}
-
-@mixin _selected-icon-color($color-or-map) {
-  @include checkmark-color($color-or-map);
-}
-
-@mixin _unselected-icon-color($color-or-map) {
-  @include _is-unselected() {
-    @include icon-color($color-or-map);
-  }
-}
-
-@mixin _icon-color($color) {
-  .md3-chip__icon--primary {
-    color: $color;
-  }
-}
-
-///
-/// Customizes the icon container 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 icon-container-color(blue);
-///   @include icon-container-color((disabled: gray));
-///
-/// @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(map.get($color-or-map, default));
-
-  .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
-    @include _icon-container-color(map.get($color-or-map, hover));
-  }
-
-  .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple.focus() {
-    //   @include _icon-container-color(
-    //     map.get($color-or-map, focus)
-    //   );
-    // }
-  }
-
-  &.md3-chip--disabled {
-    @include _icon-container-color(map.get($color-or-map, disabled));
-  }
-}
-
-@mixin _icon-container-color($color) {
-  .md3-chip__icon--primary {
-    @if $color {
-      background-color: $color;
-    }
-  }
-}
-
-///
-/// Sets the size of the icon.
-/// @param {Number} $size - The size of the icon.
-///
-@mixin icon-size($size) {
-  .md3-chip__icon--primary {
-    height: $size;
-    width: $size;
-    font-size: $size;
-  }
-}
-
-///
-/// Sets the size of the delete action.
-/// @param {Number} $size - The size of the delete action.
-///
-@mixin delete-action-size($size) {
-  .md3-chip__icon--delete {
-    height: $size;
-    width: $size;
-    font-size: $size;
-  }
-}
-
-///
-/// 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 delete-action-color(blue);
-///   @include delete-action-color((disabled: gray));
-///
-/// @param {Color | Map} $color-or-map - The delete action's color or a state Map
-///
-@mixin delete-action-color($color-or-map) {
-  @include _delete-action-color(map.get($color-or-map, default));
-
-  @include _is-enabled() {
-    @include _delete-action-color(map.get($color-or-map, enabled));
-  }
-
-  .md3-chip__action--delete:hover {
-    @include _delete-action-color(map.get($color-or-map, hover));
-  }
-
-  .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 _delete-action-color(map.get($color-or-map, disabled));
-  }
-}
-
-@mixin _delete-action-color($color) {
-  .md3-chip__icon--delete {
-    @if $color {
-      color: $color;
-    }
-  }
-}
-
-///
-/// Sets the size of the checkmark.
-/// @param {Number} $size - The size of the checkmark.
-///
-@mixin checkmark-size($size) {
-  .md3-chip__checkmark {
-    height: $size;
-    width: $size;
-  }
-}
-
-///
-/// Customizes the checkmark 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`, `enabled`, `hover`, `focus`, `disabled`.
-///
-/// @example
-///   @include checkmark-color(blue);
-///   @include checkmark-color((disabled: gray));
-///
-/// @param {Color | Map} $color-or-map - The checkmark's color or a state Map
-///
-@mixin checkmark-color($color-or-map) {
-  @include _checkmark-color(map.get($color-or-map, default));
-
-  @include _is-enabled() {
-    @include _checkmark-color(map.get($color-or-map, enabled));
-  }
-
-  .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
-    @include _checkmark-color(map.get($color-or-map, hover));
-  }
-
-  .md3-chip__action--primary {
-    // 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(map.get($color-or-map, disabled));
-  }
-}
-
-@mixin _checkmark-color($color) {
-  .md3-chip__checkmark {
-    @if $color {
-      color: $color;
-    }
-  }
-}
-
-///
-/// Customizes the checkmark container 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 checkmark-container-color(blue);
-///   @include checkmark-container-color((disabled: gray));
-///
-/// @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(map.get($color-or-map, default));
-
-  &.md3-chip--disabled {
-    @include _checkmark-container-color(map.get($color-or-map, disabled));
-  }
-}
-
-@mixin _checkmark-container-color($color) {
-  .md3-chip__checkmark-background {
-    @if $color {
-      background-color: $color;
-    }
-  }
-}
-
-///
-/// Sets the horizontal padding for the chip.
-/// @param {Number} $leading - The leading padding for the chip.
-/// @param {Number} $trailing [$leading] - The trailing padding for the chip.
-///
-@mixin horizontal-padding($leading, $trailing: $leading) {
-  .md3-chip__action--primary {
-    padding-inline: $leading $trailing;
-  }
-}
-
-///
-/// Sets the horizontal padding for chips with a graphic.
-/// @param {Number} $graphic-leading - The leading padding for the graphic.
-/// @param {Number} $graphic-trailing - The trailing padding for the graphic.
-/// @param {Number} $primary-trailing - The trailing padding for the primary action.
-///
-@mixin with-graphic-horizontal-padding(
-  $graphic-leading,
-  $graphic-trailing,
-  $primary-trailing
-) {
-  &.md3-chip--with-primary-graphic {
-    .md3-chip__graphic {
-      padding-inline: $graphic-leading $graphic-trailing;
-    }
-
-    .md3-chip__action--primary {
-      padding-inline-end: $primary-trailing;
-    }
-  }
-}
-
-///
-/// Sets the horizontal padding for chips with a delete action.
-/// @param {Number} $primary-leading - The leading padding for the primary 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-delete-action-horizontal-padding(
-  $primary-leading,
-  $delete-action-leading,
-  $delete-action-trailing
-) {
-  &.md3-chip--with-delete-action {
-    .md3-chip__action--delete {
-      padding-inline: $delete-action-leading $delete-action-trailing;
-    }
-
-    #{$ripple-target-delete} {
-      inset-inline-start: $delete-action-leading;
-    }
-
-    .md3-chip__action--primary {
-      padding-inline-start: $primary-leading;
-    }
-  }
-}
-
-///
-/// 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} $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-delete-action-horizontal-padding(
-  $graphic-leading,
-  $graphic-trailing,
-  $delete-action-leading,
-  $delete-action-trailing
-) {
-  &.md3-chip--with-primary-graphic.md3-chip--with-delete-action {
-    .md3-chip__graphic {
-      padding-inline: $graphic-leading $graphic-trailing;
-    }
-
-    .md3-chip__action--delete {
-      padding-inline: $delete-action-leading $delete-action-trailing;
-    }
-
-    #{$ripple-target-delete} {
-      inset-inline-start: $delete-action-leading;
-    }
-
-    .md3-chip__action--primary {
-      padding-inline: 0 0;
-    }
-  }
-}
-
-@mixin _container-elevation($resolver, $shadow-color, $map) {
-  // TODO(b/240224981): Use M3 resolver.
-  @include elevation-theme.theme-styles(
-    (
-      shadow: $shadow-color,
-    )
-  );
-}
-
-@mixin _selected-container-elevation($resolver, $shadow-color, $map) {
-  @include _is-selected() {
-    @include _container-elevation($resolver, $shadow-color, $map);
-  }
-}
-
-@mixin _unselected-container-elevation($resolver, $shadow-color, $map) {
-  @include _is-unselected() {
-    @include _container-elevation($resolver, $shadow-color, $map);
-  }
-}
-
-@mixin _is-enabled() {
-  &:not(.md3-chip--disabled) {
-    @content;
-  }
-}
-
-@mixin _is-disabled() {
-  &.md3-chip--disabled {
-    @content;
-  }
-}
-
-@mixin _is-selected() {
-  &.md3-chip--selected {
-    @content;
-  }
-}
-
-@mixin _is-unselected() {
-  &:not(.md3-chip--selected) {
-    @content;
-  }
-}