fix(icon): invert icon color for some circle colors

Author: bennypowers

elements/pfe-icon/pfe-icon.scss

@@ -150,6 +150,10 @@ $sizing: (
     }
   }
 
+  :host([color="#{$color}"][circled]) {
+    --pfe-icon--color: white;
+  }
+
 
   /* Override circled items with color set to named property */
   :host([color=#{$color}][circled]:not([circled="false"])) {

elements/pfe-icon/pfe-icon.ts

@@ -4,7 +4,7 @@ import { LitElement, html, svg } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { pfelement, bound, observed } from '@patternfly/pfe-core/decorators.js';
+import { pfelement, bound, observed, colorContextConsumer } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
@@ -13,6 +13,7 @@ import { PfeIconSet } from './icon-set.js';
 import { addBuiltIns } from './builtin-icon-sets.js';
 
 import style from './pfe-icon.scss';
+import { ColorTheme } from '@patternfly/pfe-core';
 
 export type IconColor = (
   | 'accent'
@@ -141,6 +142,12 @@ export class PfeIcon extends LitElement {
 
   @property({ type: Boolean, reflect: true }) block = false;
 
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer()
+  @property({ reflect: true }) on?: ColorTheme;
+
   @state() private _iconHref = '';
 
   @state() private _filterId?: string;