fix(autocomplete): add color context provider and consumer

Author: zeroedin

elements/pfe-autocomplete/pfe-autocomplete.ts

@@ -3,12 +3,16 @@ import type { DroplistSelectEvent, PfeSearchDroplist } from './pfe-search-dropli
 import { LitElement, html } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 
+import { ColorPalette, ColorTheme } from '@patternfly/pfe-core';
+
 import { ComposedEvent } from '@patternfly/pfe-core';
-import { pfelement, bound, observed } from '@patternfly/pfe-core/decorators.js';
+import { pfelement, bound, observed, colorContextConsumer, colorContextProvider, deprecation, } from '@patternfly/pfe-core/decorators.js';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';
 
+
 import './pfe-search-droplist';
 
+
 import style from './pfe-autocomplete.scss';
 
 export type AutocompleteRequestFunction =
@@ -109,6 +113,25 @@ export class PfeAutocomplete extends LitElement {
 
   static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
+  /**
+   * Sets color palette, which affects the element's styles as well as descendants' color theme.
+   * Overrides parent color context.
+   * Your theme will influence these colors so check there first if you are seeing inconsistencies.
+   * See [Color](https://patternflyelements.org/theming/colors/) for default values
+   */
+  @colorContextProvider()
+  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+
+  /** @deprecated use `color-palette` */
+  @deprecation({ alias: 'colorPalette', attribute: 'color' }) color?: ColorPalette;
+
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer()
+  @property({ reflect: true }) on: ColorTheme = 'light';
+
+
   /**
    * Set this attribute when you want to set a value in input box when web component is added to page.
    */

elements/pfe-autocomplete/pfe-search-droplist.ts

@@ -3,8 +3,9 @@ import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { ComposedEvent } from '@patternfly/pfe-core';
-import { pfelement, bound, observed } from '@patternfly/pfe-core/decorators.js';
+import { ComposedEvent, ColorTheme } from '@patternfly/pfe-core';
+
+import { pfelement, bound, observed, colorContextConsumer } from '@patternfly/pfe-core/decorators.js';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';
 
 import style from './pfe-search-droplist.scss';
@@ -38,6 +39,12 @@ export class PfeSearchDroplist extends LitElement {
 
   static readonly styles = [style];
 
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer()
+  @property({ reflect: true }) on: ColorTheme = 'light';
+
   /** Set when the combo box dropdown is open */
   @property({ type: Boolean, reflect: true }) open = false;