fix(tabs): saturated context for earth variant

Author: bennypowers

elements/pfe-tabs/pfe-tab-panel.scss

@@ -126,8 +126,8 @@
 }
 
 :host([on="saturated"][variant="earth"]) {
-  background-color: pfe-local(BackgroundColor, $region: panel, $fallback: pfe-var(surface--lightest));
-  @include pfe-set-broadcast-context(light);
+  background-color: pfe-local(BackgroundColor, $region: panel, $fallback: pfe-var(surface--accent));
+  @include pfe-set-broadcast-context(saturated);
 }
 
 :host([on="saturated"]:not([variant="earth"])) {

elements/pfe-tabs/pfe-tab-panel.ts

@@ -1,7 +1,9 @@
+import type { ColorTheme } from '@patternfly/pfe-core';
+
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { pfelement, initializer } from '@patternfly/pfe-core/decorators.js';
+import { pfelement, initializer, colorContextConsumer } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import style from './pfe-tab-panel.scss';
@@ -18,6 +20,12 @@ export class PfeTabPanel extends LitElement {
 
   static readonly styles = [style];
 
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer()
+  @property({ reflect: true }) on?: ColorTheme;
+
   /** Selected tab */
   @property({ type: Boolean, reflect: true, attribute: 'aria-selected' }) selected = false;
 

elements/pfe-tabs/pfe-tab.scss

@@ -233,12 +233,24 @@
 }
 
 // SATURATED
+:host([variant="earth"][on="saturated"]) {
+  --pfe-tabs--BackgroundColor: #{pfe-var(surface--accent)};
+  --pfe-tabs--BackgroundColor--inactive: #{pfe-var(surface--complement)};
+  border-right-color: pfe-var(surface--border--darker);
+  border-left-color: pfe-var(surface--border--darker);
+}
+
 :host([variant="earth"][on="saturated"][aria-selected="false"]) {
-  --pfe-tabs--BackgroundColor: #{pfe-var(surface--lighter)};
+  --pfe-tabs--Color: #6a6e73 // !important;
 }
 
 :host([variant="earth"][on="saturated"][aria-selected="true"]) {
-  --pfe-tabs--BackgroundColor: #{pfe-var(surface--lightest)};
+  --pfe-tabs--Color: #151515; // !important;
+}
+
+:host([variant="earth"][on="saturated"][aria-selected="false"]:hover) {
+  --pfe-tabs--BackgroundColor: #{pfe-var(surface--complement)};
+  --pfe-tabs--Color: #6a6e73 // !important;
 }
 
 
@@ -265,6 +277,8 @@
   --pfe-tabs--BorderColor: #{pfe-var(surface--border)};
 }
 
+// DARK
+
 :host([on="dark"]:not([variant="earth"])) {
   --pfe-tabs--Color: #{pfe-var(text--on-dark)};
   --pfe-tabs--Color--focus: #{pfe-var(text--on-dark)};

elements/pfe-tabs/pfe-tab.ts

@@ -1,7 +1,9 @@
+import type { ColorTheme } from '@patternfly/pfe-core';
+
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 
-import { pfelement, bound, observed, initializer } from '@patternfly/pfe-core/decorators.js';
+import { pfelement, bound, observed, initializer, 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';
 
@@ -31,6 +33,12 @@ export class PfeTab extends LitElement {
   /** Variant */
   @property({ reflect: true }) variant: 'wind'|'earth' = 'wind';
 
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer()
+  @property({ reflect: true }) on?: ColorTheme;
+
   /** @deprecated `tabIndex` property reflects per spec */
   get tabindex() {
     return this.tabIndex;

elements/pfe-tabs/pfe-tabs.ts

@@ -1,9 +1,14 @@
+import type { ColorPalette, ColorTheme } from '@patternfly/pfe-core';
+
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import {
   bound,
   cascades,
+  colorContextConsumer,
+  colorContextProvider,
+  deprecation,
   initializer,
   observed,
   pfelement,
@@ -60,6 +65,26 @@ export class PfeTabs extends LitElement {
 
   private _setFocus = false;
 
+  /**
+   * 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 [CSS Custom Properties](#css-custom-properties) for default values
+   *
+   * Card always resets its context to `base`, unless explicitly provided with a `color-palette`.
+   */
+  @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;
+
    /**
     * Values:
     * - `wind`: Borders are removed, only an accent colored indicator appears under the active heading.