fix(cta): revert removal of colorPalette, deprecate instead (#1245)

* fix(cta): revert removal of colorContext provider, deprecate instead

* fix(cta): remove colorProvider, instead mock color-palette attribute

* fix(cta): add mutation observer and deprecation warning

* fix(cta): remove rogue file

* chore(cta): add changeset

* fix(cta): move deprecated code in a comment block, format jsdoc @attr

* chore(cta): update decprecation comment block

* chore(cta): update changeset

* chore: whitespace and docs

---------

Co-authored-by: Benny Powers <[email protected]>

.changeset/tough-trainers-fail.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-cta>`: adds `color-palette` attribute back with deprecation notice

elements/rh-cta/rh-cta.ts

@@ -7,6 +7,7 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 import { DirController } from '../../lib/DirController.js';
 
+import { type ColorPalette } from 'lib/context/color/provider.js';
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import style from './rh-cta.css';
@@ -40,7 +41,15 @@ function isButton(element: Element): element is HTMLButtonElement {
  *
  * @summary     Directs users to other pages or displays extra content
  * @slot
- *              We expect an anchor tag, `<a>` with an `href`, to be the first child inside `rh-cta` element. Less preferred but allowed for specific use-cases include: `<button>` (note however that the `button` tag is not supported for the default CTA styles).
+ *              We expect an anchor tag, `<a>` with an `href`, to be the first child inside `rh-cta` element. Less preferred but
+ *              allowed for specific use-cases include: `<button>` (note however that the `button` tag is not supported for the
+ *              default CTA styles).
+ * @attr        color-palette
+ *              [**Deprecated**] intended for use in elements that have slotted descendants, will be removed in a future release.
+ *              - 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.
+ *              {@deprecated color-palette intended for usage in elements that have slotted descendants}
  * @csspart     container - container element for slotted CTA
  * @cssprop     {<color>} --rh-cta-color
  *              Sets the cta color
@@ -142,9 +151,37 @@ export class RhCta extends LitElement {
     return !this.hasAttribute('variant');
   }
 
+  // START DEPRECATION WARNING
+  /* note: remove ColorPalette type, and property decorator import above */
+  /**
+   * @deprecated do not use the color-palette attribute, which was added by mistake. use context-providing containers (e.g. rh-card) instead
+   */
+  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+
+  #mo = new MutationObserver(() => this.#onMutation());
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.#mo.observe(this, { attributes: true, attributeFilter: ['color-palette'] });
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.#mo.disconnect();
+  }
+
+  #onMutation() {
+    this.#logger.warn('The color-palette attribute is deprecated and will be removed in a future release.');
+  }
+  // END DEPRECATION WARNING
+
   render() {
     const rtl = this.#dir.dir === 'rtl';
-    const { on = '' } = this;
+    // START DEPRECATION WARNING
+    /* note: remove on from classMap below */
+    const dark = this.colorPalette?.includes('dark') ? 'dark' : '';
+    const on = this.on ?? dark;
+    // END DEPRECATION WARNING
     const svg = !!this.#isDefault;
     const icon = !!this.icon;
     const iconOrSvg = !!this.#isDefault || !!this.icon;