@material/web 0.1.0-alpha.0

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

@@ -0,0 +1,1329 @@
+/**
+ * @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.
+
+@use 'sass:map';
+@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';
+
+$height: 32px;
+$minimum-height: 24px;
+$maximum-height: $height;
+$density-scale: density.$default-scale;
+$density-config: (
+  height: (
+    default: $height,
+    maximum: $maximum-height,
+    minimum: $minimum-height,
+  ),
+);
+$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);
+$ripple-color: on-surface;
+$checkmark-size: 20px;
+$leading-icon-size: 20px;
+$trailing-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;
+$trailing-action-leading-padding: 8px;
+$trailing-action-trailing-padding: 8px;
+$ripple-target: '.md3-chip__ripple';
+$ripple-target-primary: '.md3-chip__ripple--primary';
+$ripple-target-trailing: '.md3-chip__ripple--trailing';
+
+// Filter chip colors
+$filter-selected-container-color: color.mix(
+  theme-color.prop-value(on-surface),
+  $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-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,
+);
+$_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
+  );
+}
+
+@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
+  );
+
+  @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:
+        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 trailing-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),
+    )
+  );
+  @include _ripple-theme(
+    (
+      focus-state-layer-color: map.get($theme, focus-state-layer-color),
+      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
+      hover-state-layer-color: map.get($theme, hover-state-layer-color),
+      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
+      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
+      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
+    )
+  );
+  @include _selected-ripple-theme(
+    (
+      focus-state-layer-color: map.get($theme, selected-focus-state-layer-color),
+      focus-state-layer-opacity:
+        map.get($theme, selected-focus-state-layer-opacity),
+      hover-state-layer-color: map.get($theme, selected-hover-state-layer-color),
+      hover-state-layer-opacity:
+        map.get($theme, selected-hover-state-layer-opacity),
+      pressed-state-layer-color:
+        map.get($theme, selected-pressed-state-layer-color),
+      pressed-state-layer-opacity:
+        map.get($theme, selected-pressed-state-layer-opacity),
+    )
+  );
+  @include _unselected-ripple-theme(
+    (
+      focus-state-layer-color:
+        map.get($theme, unselected-focus-state-layer-color),
+      focus-state-layer-opacity:
+        map.get($theme, unselected-focus-state-layer-opacity),
+      hover-state-layer-color:
+        map.get($theme, unselected-hover-state-layer-color),
+      hover-state-layer-opacity:
+        map.get($theme, unselected-hover-state-layer-opacity),
+      pressed-state-layer-color:
+        map.get($theme, unselected-pressed-state-layer-color),
+      pressed-state-layer-opacity:
+        map.get($theme, unselected-pressed-state-layer-opacity),
+    )
+  );
+}
+
+@function _resolve-theme($theme, $resolvers) {
+  $theme: elevation-theme.resolve-theme(
+    $theme,
+    map.get($resolvers, elevation),
+    $shadow-color-token: elevated-container-shadow-color,
+    $elevation-tokens: (
+      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.theme(
+      (
+        focus-state-layer-color: map.get($ripple-theme, focus-state-layer-color),
+        focus-state-layer-opacity:
+          map.get($ripple-theme, focus-state-layer-opacity),
+        hover-state-layer-color: map.get($ripple-theme, hover-state-layer-color),
+        hover-state-layer-opacity:
+          map.get($ripple-theme, hover-state-layer-opacity),
+        pressed-state-layer-color:
+          map.get($ripple-theme, pressed-state-layer-color),
+        pressed-state-layer-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(kainby): Translate to md3 ripple
+    // @include ripple-theme.states(
+    //   $color: $color,
+    //   $opacity-map: $opacity-map,
+    //   $ripple-target: $ripple-target
+    // );
+  }
+}
+
+///
+/// Sets the ripple color of the chip's trailing 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(
+    //   $color: $color,
+    //   $opacity-map: $opacity-map,
+    //   $ripple-target: $ripple-target
+    // );
+  }
+}
+
+///
+/// Sets the size of the trailing action's ripple.
+/// @param {Number} $size - The size of the ripple.
+///
+@mixin trailing-action-ripple-size($size) {
+  .md3-chip__ripple--trailing {
+    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(kainby): Translate to md3 shape
+  // @include shape.radius($radius);
+
+  #{$ripple-target} {
+    // TODO(kainby): Translate to md3 shape
+    // @include shape.radius($radius);
+  }
+
+  .md3-chip__action--primary:before {
+    // TODO(kainby): Translate to md3 shape
+    // @include shape.radius($radius);
+  }
+}
+
+@mixin _avatar-shape($radius) {
+  .md3-chip__icon--primary {
+    // TODO(kainby): 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(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,
+//     );
+//   }
+}
+
+///
+/// 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(state.get-default-state($color-or-map));
+  @include _is-enabled() {
+    @include _outline-color(state.get-enabled-state($color-or-map));
+  }
+  @include _focus-outline-color(state.get-focus-state($color-or-map));
+  @include _is-disabled() {
+    @include _outline-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@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(kainby): Translate to md3 ripple
+    // @include ripple-theme.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(state.get-default-state($color-or-map));
+  @include _is-enabled() {
+    @include _container-color(state.get-enabled-state($color-or-map));
+  }
+  @include _is-disabled() {
+    @include _container-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+///
+/// 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(state.get-default-state($color-or-map));
+  @include _is-enabled() {
+    @include _text-label-color(state.get-enabled-state($color-or-map));
+  }
+  .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
+    @include _text-label-color(state.get-hover-state($color-or-map));
+  }
+
+  .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));
+    // }
+  }
+
+  @include _is-disabled() {
+    @include _text-label-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@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(kainby): 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(state.get-default-state($color-or-map));
+
+  @include _is-enabled() {
+    @include _icon-color(state.get-enabled-state($color-or-map));
+  }
+
+  .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
+    @include _icon-color(state.get-hover-state($color-or-map));
+  }
+
+  .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));
+    // }
+  }
+
+  @include _is-disabled() {
+    @include _icon-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@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(
+    state.get-default-state($color-or-map)
+  );
+
+  .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
+    @include _icon-container-color(
+      state.get-hover-state($color-or-map)
+    );
+  }
+
+  .md3-chip__action--primary:not(.md3-chip__action--presentational) {
+    // TODO(kainby): Translate to md3 ripple
+    // @include ripple-theme.focus() {
+    //   @include _icon-container-color(
+    //     state.get-focus-state($color-or-map)
+    //   );
+    // }
+  }
+
+  &.md3-chip--disabled {
+    @include _icon-container-color(
+      state.get-disabled-state($color-or-map)
+    );
+  }
+}
+
+@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 trailing action.
+/// @param {Number} $size - The size of the trailing action.
+///
+@mixin trailing-action-size($size) {
+  .md3-chip__icon--trailing {
+    height: $size;
+    width: $size;
+    font-size: $size;
+  }
+}
+
+///
+/// Customizes the trailing 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));
+///
+/// @param {Color | Map} $color-or-map - The trailing 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)
+  );
+
+  @include _is-enabled() {
+    @include _trailing-action-color(
+      state.get-enabled-state($color-or-map)
+    );
+  }
+
+  .md3-chip__action--trailing:hover {
+    @include _trailing-action-color(
+      state.get-hover-state($color-or-map)
+    );
+  }
+
+  .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)
+    //   );
+    // }
+  }
+
+  @include _is-disabled() {
+    @include _trailing-action-color(
+      state.get-disabled-state($color-or-map)
+    );
+  }
+}
+
+@mixin _trailing-action-color($color) {
+  .md3-chip__icon--trailing {
+    @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(state.get-default-state($color-or-map));
+
+  @include _is-enabled() {
+    @include _checkmark-color(state.get-enabled-state($color-or-map));
+  }
+
+  .md3-chip__action--primary:not(.md3-chip__action--presentational):hover {
+    @include _checkmark-color(state.get-hover-state($color-or-map));
+  }
+
+  .md3-chip__action--primary {
+    // TODO(kainby): Translate to md3 ripple
+    // @include ripple-theme.focus() {
+    //   @include _checkmark-color(state.get-focus-state($color-or-map));
+    // }
+  }
+
+  @include _is-disabled() {
+    @include _checkmark-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@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(
+    state.get-default-state($color-or-map)
+  );
+
+  &.md3-chip--disabled {
+    @include _checkmark-container-color(
+      state.get-disabled-state($color-or-map)
+    );
+  }
+}
+
+@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 trailing 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.
+///
+@mixin with-trailing-action-horizontal-padding(
+  $primary-leading,
+  $trailing-action-leading,
+  $trailing-action-trailing
+) {
+  &.md3-chip--with-trailing-action {
+    .md3-chip__action--trailing {
+      padding-inline: $trailing-action-leading $trailing-action-trailing;
+    }
+
+    #{$ripple-target-trailing} {
+      inset-inline-start: $trailing-action-leading;
+    }
+
+    .md3-chip__action--primary {
+      padding-inline-start: $primary-leading;
+    }
+  }
+}
+
+///
+/// Sets the horizontal padding for chips with a graphic and trailing 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.
+///
+@mixin with-graphic-and-trailing-action-horizontal-padding(
+  $graphic-leading,
+  $graphic-trailing,
+  $trailing-action-leading,
+  $trailing-action-trailing
+) {
+  &.md3-chip--with-primary-graphic.md3-chip--with-trailing-action {
+    .md3-chip__graphic {
+      padding-inline: $graphic-leading $graphic-trailing;
+    }
+
+    .md3-chip__action--trailing {
+      padding-inline: $trailing-action-leading $trailing-action-trailing;
+    }
+
+    #{$ripple-target-trailing} {
+      inset-inline-start: $trailing-action-leading;
+    }
+
+    .md3-chip__action--primary {
+      padding-inline: 0 0;
+    }
+  }
+}
+
+@mixin _container-elevation($resolver, $shadow-color, $map) {
+  // TODO(kainby): 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;
+  }
+}