feat(chips): add high contrast support

PiperOrigin-RevId: 542694155

chips/assist-chip.ts

@@ -7,6 +7,7 @@
 import {customElement} from 'lit/decorators.js';
 
 import {AssistChip} from './lib/assist-chip.js';
+import {styles as forcedColorsStyles} from './lib/assist-forced-colors-styles.css.js';
 import {styles} from './lib/assist-styles.css.js';
 import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
 import {styles as sharedStyles} from './lib/shared-styles.css.js';
@@ -25,5 +26,6 @@ declare global {
  */
 @customElement('md-assist-chip')
 export class MdAssistChip extends AssistChip {
-  static override styles = [sharedStyles, elevatedStyles, styles];
+  static override styles =
+      [sharedStyles, elevatedStyles, styles, forcedColorsStyles];
 }

chips/filter-chip.ts

@@ -8,6 +8,7 @@ import {customElement} from 'lit/decorators.js';
 
 import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
 import {FilterChip} from './lib/filter-chip.js';
+import {styles as forcedColorsStyles} from './lib/filter-forced-colors-styles.css.js';
 import {styles} from './lib/filter-styles.css.js';
 import {styles as selectableStyles} from './lib/selectable-styles.css.js';
 import {styles as sharedStyles} from './lib/shared-styles.css.js';
@@ -28,6 +29,7 @@ declare global {
 @customElement('md-filter-chip')
 export class MdFilterChip extends FilterChip {
   static override styles = [
-    sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles
+    sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles,
+    forcedColorsStyles
   ];
 }

chips/input-chip.ts

@@ -7,6 +7,7 @@
 import {customElement} from 'lit/decorators.js';
 
 import {InputChip} from './lib/input-chip.js';
+import {styles as forcedColorsStyles} from './lib/input-forced-colors-styles.css.js';
 import {styles} from './lib/input-styles.css.js';
 import {styles as selectableStyles} from './lib/selectable-styles.css.js';
 import {styles as sharedStyles} from './lib/shared-styles.css.js';
@@ -26,6 +27,8 @@ declare global {
  */
 @customElement('md-input-chip')
 export class MdInputChip extends InputChip {
-  static override styles =
-      [sharedStyles, trailingIconStyles, selectableStyles, styles];
+  static override styles = [
+    sharedStyles, trailingIconStyles, selectableStyles, styles,
+    forcedColorsStyles
+  ];
 }

chips/lib/_elevated.scss

@@ -57,4 +57,18 @@
     background: var(--_elevated-disabled-container-color);
     opacity: var(--_elevated-disabled-container-opacity);
   }
+
+  @media (forced-colors: active) {
+    .elevated md-elevation {
+      border: 1px solid transparent;
+    }
+
+    .elevated.link md-elevation {
+      border-color: ActiveText;
+    }
+
+    .elevated.disabled md-elevation {
+      border-color: GrayText;
+    }
+  }
 }

chips/lib/_selectable.scss

@@ -63,4 +63,12 @@
   .selected:active .leading.icon {
     color: var(--_selected-pressed-leading-icon-color);
   }
+
+  @media (forced-colors: active) {
+    .selected:not(.elevated)::before {
+      // for forced-colors. Don't add it to elevated containers since elevation
+      // already have a border added.
+      border: 1px solid transparent;
+    }
+  }
 }

chips/lib/assist-chip.ts

@@ -36,6 +36,7 @@ export class AssistChip extends Chip {
       // Link chips cannot be disabled
       disabled: !this.href && this.disabled,
       elevated: this.elevated,
+      link: !!this.href,
     };
   }
 

chips/lib/assist-forced-colors-styles.scss

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './assist-chip';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include assist-chip.theme(
+      (
+        'disabled-label-text-color': GrayText,
+        'disabled-label-text-opacity': 1,
+        'disabled-leading-icon-color': GrayText,
+        'disabled-leading-icon-opacity': 1,
+        'disabled-outline-color': GrayText,
+        'disabled-outline-opacity': 1,
+      )
+    );
+  }
+
+  .link .outline {
+    border-color: ActiveText;
+  }
+}

chips/lib/filter-forced-colors-styles.scss

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './filter-chip';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include filter-chip.theme(
+      (
+        'disabled-label-text-color': GrayText,
+        'disabled-label-text-opacity': 1,
+        'disabled-leading-icon-color': GrayText,
+        'disabled-leading-icon-opacity': 1,
+        'disabled-trailing-icon-color': GrayText,
+        'disabled-trailing-icon-opacity': 1,
+        'disabled-outline-color': GrayText,
+        'disabled-outline-opacity': 1,
+        'trailing-icon-color': ButtonText,
+        'hover-trailing-icon-color': ButtonText,
+        'focus-trailing-icon-color': ButtonText,
+        'pressed-trailing-icon-color': ButtonText,
+        'selected-trailing-icon-color': ButtonText,
+        'selected-hover-trailing-icon-color': ButtonText,
+        'selected-focus-trailing-icon-color': ButtonText,
+        'selected-pressed-trailing-icon-color': ButtonText,
+        'selected-outline-width': 1px,
+      )
+    );
+  }
+}

chips/lib/input-chip.ts

@@ -58,6 +58,7 @@ export class InputChip extends MultiActionChip {
       avatar: this.avatar,
       // Link chips cannot be disabled
       disabled: !this.href && this.disabled,
+      link: !!this.href,
       selected: this.selected,
       'has-trailing': true,
     };

chips/lib/input-forced-colors-styles.scss

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './input-chip';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include input-chip.theme(
+      (
+        'disabled-avatar-opacity': 1,
+        'disabled-label-text-color': GrayText,
+        'disabled-label-text-opacity': 1,
+        'disabled-leading-icon-color': GrayText,
+        'disabled-leading-icon-opacity': 1,
+        'disabled-trailing-icon-color': GrayText,
+        'disabled-trailing-icon-opacity': 1,
+        'disabled-outline-color': GrayText,
+        'disabled-outline-opacity': 1,
+        'trailing-icon-color': ButtonText,
+        'hover-trailing-icon-color': ButtonText,
+        'focus-trailing-icon-color': ButtonText,
+        'pressed-trailing-icon-color': ButtonText,
+        'selected-trailing-icon-color': ButtonText,
+        'selected-hover-trailing-icon-color': ButtonText,
+        'selected-focus-trailing-icon-color': ButtonText,
+        'selected-pressed-trailing-icon-color': ButtonText,
+        'selected-outline-width': 1px,
+      )
+    );
+  }
+
+  .link .outline {
+    border-color: ActiveText;
+  }
+}

chips/lib/suggestion-forced-colors-styles.scss

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './suggestion-chip';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include suggestion-chip.theme(
+      (
+        'disabled-label-text-color': GrayText,
+        'disabled-label-text-opacity': 1,
+        'disabled-leading-icon-color': GrayText,
+        'disabled-leading-icon-opacity': 1,
+        'disabled-outline-color': GrayText,
+        'disabled-outline-opacity': 1,
+      )
+    );
+  }
+
+  .link .outline {
+    border-color: ActiveText;
+  }
+}

chips/suggestion-chip.ts

@@ -9,6 +9,7 @@ import {customElement} from 'lit/decorators.js';
 import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
 import {styles as sharedStyles} from './lib/shared-styles.css.js';
 import {SuggestionChip} from './lib/suggestion-chip.js';
+import {styles as forcedColorsStyles} from './lib/suggestion-forced-colors-styles.css.js';
 import {styles} from './lib/suggestion-styles.css.js';
 
 declare global {
@@ -25,5 +26,6 @@ declare global {
  */
 @customElement('md-suggestion-chip')
 export class MdSuggestionChip extends SuggestionChip {
-  static override styles = [sharedStyles, elevatedStyles, styles];
+  static override styles =
+      [sharedStyles, elevatedStyles, styles, forcedColorsStyles];
 }

tokens/_md-comp-suggestion-chip.scss

@@ -23,6 +23,7 @@ $supported-tokens: (
   'disabled-label-text-color',
   'disabled-label-text-opacity',
   'disabled-leading-icon-color',
+  'disabled-leading-icon-opacity',
   'disabled-outline-color',
   'disabled-outline-opacity',
   'elevated-container-color',