feat(button): preliminary color context support

Author: bennypowers

elements/pfe-button/demo/pfe-button.html

@@ -1,4 +1,5 @@
 <link rel="stylesheet" href="/elements/pfe-button/demo/demo.css">
+<link rel="stylesheet" href="/core/pfe-styles/pfe.min.css">
 
 <pfe-band size="small" class="contextual">
   <h2 slot="header">Default - Medium size</h2>

elements/pfe-button/pfe-button.scss

@@ -98,14 +98,31 @@
 :host([variant="secondary"]) {
   #container {
     ::slotted(button) {
-      color: pfe-local(Color, pfe-var(ui-accent)) !important;
+      color: var(--pfe-button--Color, var(--pfe-theme--color--text)) !important;
       &::after {
         border-color: pfe-local(BorderColor, $region: after, $fallback: pfe-var(ui-accent)) !important;
       }
     }
   }
 }
 
+:host([on^=dark]),
+:host([on=saturated]) {
+  --pfe-theme--color--text: #ffffff;
+}
+
+:host([on^=dark][variant="tertiary"]) {
+  --pfe-theme--color--ui-accent: #ffffff;
+}
+
+:host([on=saturated][variant="control"]) {
+  --pfe-button__after--BorderColor: var(--pfe-theme--color--ui--border, #8a8d90);
+}
+
+:host([on^=dark][variant="control"]) {
+  --pfe-button__after--BorderColor: var(--pfe-theme--color--ui--border--darker, #151515);
+}
+
 :host([variant="tertiary"]) {
   #container {
     ::slotted(button) {
@@ -123,8 +140,8 @@
       color: pfe-local(Color, pfe-var(text)) !important;
       border-radius: pfe-local(BorderRadius, 0) !important;
       &::after {
-        border-color: pfe-local(BorderColor, $region: after, $fallback: pfe-var(ui--border--lightest)) !important;
-        border-bottom-color: pfe-var(ui--border) !important;
+        border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--ui--border--lightest, #f0f0f0)) !important;
+        border-bottom-color: var(--pfe-theme--color--ui--border, #8a8d90) !important;
       }
     }
 

elements/pfe-button/pfe-button.ts

@@ -1,11 +1,12 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { bound, observed, pfelement } from '@patternfly/pfe-core/decorators.js';
+import { bound, colorContextConsumer, observed, pfelement } from '@patternfly/pfe-core/decorators.js';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 import styles from './pfe-button.scss';
+import { ColorTheme } from '@patternfly/pfe-core';
 
 /**
  * Buttons allow users to perform an action when triggered. They feature a text label, a background or a border, and icons.
@@ -81,6 +82,12 @@ export class PfeButton extends LitElement {
   @observed
   @property() type?: 'button'|'submit'|'reset';
 
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer()
+  @property({ reflect: true }) on?: ColorTheme;
+
   private logger = new Logger(this);
 
   private mo = new MutationObserver(this.onMutation);
@@ -91,7 +98,6 @@ export class PfeButton extends LitElement {
 
   connectedCallback() {
     this.onSlotChange();
-    this.onMutation();
     super.connectedCallback();
     this.addEventListener('click', this.onClick);
   }
@@ -104,6 +110,11 @@ export class PfeButton extends LitElement {
     `;
   }
 
+  protected firstUpdated(): void {
+    this._disabledChanged();
+    this.onMutation();
+  }
+
   protected _typeChanged() {
     if (this.button && this.button.type !== this.type) {
       if (this.type) {