fix(card): support color via @deprecation

Author: bennypowers

elements/pfe-card/demo/pfe-card.html

@@ -105,3 +105,21 @@ <h2 slot="header">Background Image on card </h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta rerum tempore natus alias! Cumque illum
     provident corrupti voluptates.</p>
 </pfe-card>
+
+<pfe-card>
+  <h2 slot="header">Deprecated <code>color</code> attribute</h2>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta rerum tempore natus alias! Cumque illum
+    provident corrupti voluptates.</p>
+  <pfe-select id="context-selector" slot="footer">
+    <select>
+      <option disabled>Select a palette</option>
+      <option value="lightest">Lightest</option>
+      <option value="lighter">Lighter</option>
+      <option value="base" selected>Default</option>
+      <option value="darker">Darker</option>
+      <option value="darkest">Darkest</option>
+      <option value="accent">Accent</option>
+      <option value="complement">Complement</option>
+    </select>
+  </pfe-select>
+</pfe-card>

elements/pfe-card/demo/pfe-card.js

@@ -1,2 +1,9 @@
 import '@patternfly/pfe-band';
 import '@patternfly/pfe-card';
+import '@patternfly/pfe-select';
+
+const root = document.querySelector('[data-demo="pfe-card"]')?.shadowRoot ?? document;
+
+root.querySelector('#context-selector').addEventListener('select', event => {
+  event.target.closest('pfe-card').setAttribute('color', event.value);
+});

elements/pfe-card/pfe-card.scss

@@ -53,11 +53,11 @@ $size-small: (
 :host {
   --context: #{pfe-local(context)};
 
+  --pfe-theme--color--surface--lightest: #ffffff;
+  --pfe-theme--color--surface--lighter: #ececec;
+  --pfe-theme--color--surface--base: #f0f0f0;
   --pfe-theme--color--surface--darker: #3c3f42;
   --pfe-theme--color--surface--darkest: #151515;
-  --pfe-theme--color--surface--base: #f0f0f0;
-  --pfe-theme--color--surface--lighter: #ececec;
-  --pfe-theme--color--surface--lightest: #ffffff;
   --pfe-theme--color--surface--accent: #004080;
   --pfe-theme--color--surface--complement: #002952;
 
@@ -91,7 +91,10 @@ $size-small: (
   }
 }
 
-:host([color-palette]), :host([on]) {
+/* @deprecated */
+:host([color]),
+:host([color-palette]),
+:host([on]) {
   background-color:    var(--pfe-card--BackgroundColor, var(--pfe-context-background-color));
 }
 

elements/pfe-card/pfe-card.ts

@@ -4,7 +4,13 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { colorContextConsumer, colorContextProvider, observed, pfelement } from '@patternfly/pfe-core/decorators.js';
+import {
+  colorContextConsumer,
+  colorContextProvider,
+  deprecation,
+  observed,
+  pfelement
+} from '@patternfly/pfe-core/decorators.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 
 import style from './pfe-card.scss';
@@ -30,6 +36,15 @@ import style from './pfe-card.scss';
  * @csspart body - The container for *body* content
  * @csspart footer - The container for *footer* content
  *
+ *
+ * @cssproperty {<color>} --pfe-theme--color--surface--lightest   {@default `#ffffff`}
+ * @cssproperty {<color>} --pfe-theme--color--surface--lighter    {@default `#ececec`}
+ * @cssproperty {<color>} --pfe-theme--color--surface--base       {@default `#f0f0f0`}
+ * @cssproperty {<color>} --pfe-theme--color--surface--darker     {@default `#3c3f42`}
+ * @cssproperty {<color>} --pfe-theme--color--surface--darkest    {@default `#151515`}
+ * @cssproperty {<color>} --pfe-theme--color--surface--accent     {@default `#004080`}
+ * @cssproperty {<color>} --pfe-theme--color--surface--complement {@default `#002952`}
+ *
  * @cssproperty --pfe-band--BackgroundColor
  *              Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable.  If you update this value manually, you should also update the `--theme` context variable to invoke the right theme on it and it's child elements.  Supported themes include: `light`, `dark`, and `saturated`.
  * @cssproperty --pfe-card--BackgroundPosition
@@ -64,21 +79,22 @@ export class PfeCard extends LitElement {
   @property({ attribute: 'img-src', reflect: true }) imgSrc?: string;
 
   /**
+   * 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
    *
-   * | Color      | Hex Value                                                              |
-   * | ---------- | ---------------------------------------------------------------- |
-   * | lightest   | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
-   * | lighter    | <span class="color-preview" style="--bg:#ececec"></span> #ececec |
-   * | default    | <span class="color-preview" style="--bg:#dfdfdf"></span> #dfdfdf |
-   * | darker     | <span class="color-preview" style="--bg:#464646"></span> #464646 |
-   * | darkest    | <span class="color-preview" style="--bg:#131313"></span> #131313 |
-   * | accent     | <span class="color-preview" style="--bg:#ee0000"></span> #ee0000 |
-   * | complement | <span class="color-preview" style="--bg:#0477a4"></span> #0477a4 |
+   * Card always resets its context to `base`, unless explicitly provided with a `color-palette`.
    */
   @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette: ColorPalette = 'base';
+  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+
+  /** @deprecated use `color-palette` */
+  @deprecation({ alias: 'colorPalette', attribute: 'color' }) color: ColorPalette = 'base';
 
+  /**
+   * Sets color theme based on parent context
+   */
   @colorContextConsumer()
   @property({ reflect: true }) on?: ColorTheme;
 

elements/pfe-card/test/pfe-card.spec.ts

@@ -106,7 +106,7 @@ describe('<pfe-card>', function() {
   });
 
   // Iterate over the colors object to test expected background color results
-  describe('color values', function() {
+  describe('color palettes', function() {
     // Themes and their expected hex values
     Object.entries({
       default: '#f0f0f0',
@@ -134,6 +134,27 @@ describe('<pfe-card>', function() {
           expect(luminance(r, g, b)).to.be.greaterThan(0.5);
         }
       });
+
+      it(`it should have a background color of ${colorValue} when deprecated color attribute is ${colorName}`, async function() {
+        const element = await createFixture<PfeCard>(TEMPLATES.card1);
+        // If this is not the default color, update the color attribute
+        if (colorName !== 'default') {
+          element.setAttribute('color', colorName);
+        }
+
+        await element.updateComplete;
+
+        // Get the background color value
+        const [r, g, b] = getColor(element, 'background-color');
+        // Test that the color is rendering as expected
+        expect([r, g, b]).to.deep.equal(hexToRgb(colorValue));
+        // Test that the color is working
+        if (['dark', 'darker', 'darkest', 'complement', 'accent'].includes(colorName)) {
+          expect(luminance(r, g, b)).to.be.lessThan(0.5);
+        } else {
+          expect(luminance(r, g, b)).to.be.greaterThan(0.5);
+        }
+      });
     });
   });