From 950cd4ffc3efcb3a9e4a0d0c16ea97324d8ac69f Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Thu, 22 Jun 2023 16:07:39 -0700 Subject: [PATCH] feat(chips): add high contrast support PiperOrigin-RevId: 542694155 --- chips/assist-chip.ts | 4 +- chips/filter-chip.ts | 4 +- chips/input-chip.ts | 7 +++- chips/lib/_elevated.scss | 14 +++++++ chips/lib/_selectable.scss | 8 ++++ chips/lib/assist-chip.ts | 1 + chips/lib/assist-forced-colors-styles.scss | 27 +++++++++++++ chips/lib/filter-forced-colors-styles.scss | 34 ++++++++++++++++ chips/lib/input-chip.ts | 1 + chips/lib/input-forced-colors-styles.scss | 39 +++++++++++++++++++ .../lib/suggestion-forced-colors-styles.scss | 27 +++++++++++++ chips/suggestion-chip.ts | 4 +- tokens/_md-comp-suggestion-chip.scss | 1 + 13 files changed, 166 insertions(+), 5 deletions(-) create mode 100644 chips/lib/assist-forced-colors-styles.scss create mode 100644 chips/lib/filter-forced-colors-styles.scss create mode 100644 chips/lib/input-forced-colors-styles.scss create mode 100644 chips/lib/suggestion-forced-colors-styles.scss diff --git a/chips/assist-chip.ts b/chips/assist-chip.ts index a66e654996..da28697679 100644 --- a/chips/assist-chip.ts +++ b/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]; } diff --git a/chips/filter-chip.ts b/chips/filter-chip.ts index ea0c5011ca..1387414d86 100644 --- a/chips/filter-chip.ts +++ b/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 ]; } diff --git a/chips/input-chip.ts b/chips/input-chip.ts index 1a1c3abe11..39996aac96 100644 --- a/chips/input-chip.ts +++ b/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 + ]; } diff --git a/chips/lib/_elevated.scss b/chips/lib/_elevated.scss index eca76ff9ed..6289bf98cc 100644 --- a/chips/lib/_elevated.scss +++ b/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; + } + } } diff --git a/chips/lib/_selectable.scss b/chips/lib/_selectable.scss index a5a1a08e2b..002878c401 100644 --- a/chips/lib/_selectable.scss +++ b/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; + } + } } diff --git a/chips/lib/assist-chip.ts b/chips/lib/assist-chip.ts index 173906626d..de6f5ac211 100644 --- a/chips/lib/assist-chip.ts +++ b/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, }; } diff --git a/chips/lib/assist-forced-colors-styles.scss b/chips/lib/assist-forced-colors-styles.scss new file mode 100644 index 0000000000..7a7dc8a134 --- /dev/null +++ b/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; + } +} diff --git a/chips/lib/filter-forced-colors-styles.scss b/chips/lib/filter-forced-colors-styles.scss new file mode 100644 index 0000000000..78c97ad8d9 --- /dev/null +++ b/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, + ) + ); + } +} diff --git a/chips/lib/input-chip.ts b/chips/lib/input-chip.ts index 6a37b15f8c..d2adaf7036 100644 --- a/chips/lib/input-chip.ts +++ b/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, }; diff --git a/chips/lib/input-forced-colors-styles.scss b/chips/lib/input-forced-colors-styles.scss new file mode 100644 index 0000000000..4370c64eeb --- /dev/null +++ b/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; + } +} diff --git a/chips/lib/suggestion-forced-colors-styles.scss b/chips/lib/suggestion-forced-colors-styles.scss new file mode 100644 index 0000000000..dd67da9b60 --- /dev/null +++ b/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; + } +} diff --git a/chips/suggestion-chip.ts b/chips/suggestion-chip.ts index a7c0daf08d..488ef43f19 100644 --- a/chips/suggestion-chip.ts +++ b/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]; } diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss index c5c9367724..4f2fe18025 100644 --- a/tokens/_md-comp-suggestion-chip.scss +++ b/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',