patternfly
diff --git a/‎elements/pfe-band/src/pfe-band.js‎
Lines changed: 3 additions & 20 deletions b/‎elements/pfe-band/src/pfe-band.js‎
Lines changed: 3 additions & 20 deletions
diff --git a/‎elements/pfe-card/demo/index.html‎
Lines changed: 1 addition & 2 deletions b/‎elements/pfe-card/demo/index.html‎
Lines changed: 1 addition & 2 deletions
diff --git a/‎elements/pfe-card/src/pfe-card.js‎
Lines changed: 1 addition & 22 deletions b/‎elements/pfe-card/src/pfe-card.js‎
Lines changed: 1 addition & 22 deletions
diff --git a/‎elements/pfe-cta/README.md‎
Lines changed: 41 additions & 24 deletions b/‎elements/pfe-cta/README.md‎
Lines changed: 41 additions & 24 deletions
diff --git a/‎elements/pfe-cta/demo/demo.css‎
Lines changed: 66 additions & 0 deletions b/‎elements/pfe-cta/demo/demo.css‎
Lines changed: 66 additions & 0 deletions
@@ -143,10 +143,7 @@ class PfeBand extends PFElement {
     if (this.imageSrc) {
       this._imgSrcChanged("pfe-img-src", "", this.imageSrc);
     }
-    // Initialize the context setting for the children elements
-    if (this.backgroundColor) {
-      this._updateContext(this.backgroundColor);
-    }
+
   }
 
   attributeChangedCallback(attr, oldValue, newValue) {
@@ -169,8 +166,7 @@ class PfeBand extends PFElement {
   // Update the color attribute and contexts
   _colorChanged(attr, oldValue, newValue) {
     this[attr].value = newValue;
-    // If the new value has a dark background, update children elements
-    this._updateContext(newValue);
+
   }
 
   // Update the background image
@@ -179,20 +175,7 @@ class PfeBand extends PFElement {
     this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;
   }
 
-  // Set the children's context if parent background is dark
-  _updateContext(context) {
-    if (["darkest", "darker", "complement", "accent"].includes(context)) {
-      ["pfe-cta"].forEach(elementName => {
-        const els = [...this.querySelectorAll(`${elementName}`)];
-        els.forEach(el => {
-          const myContainer = el.closest("[pfe-type=container]");
-          if (myContainer === this || myContainer === null) {
-            el.setAttribute("on", "dark");
-          }
-        });
-      });
-    }
-  }
+
 }
 
 PFElement.create(PfeBand);
 
@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PFElements: pfe-card Demo</title>
-
     <!-- uncomment the es5-adapter if you're using the umd version -->
     <script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
     <script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
@@ -78,7 +77,7 @@ <h2 slot="pfe-card--header">Light card</h2>
           <a href="#">Learn more</a>
         </pfe-cta>
       </pfe-card>
-      
+
       <pfe-card>
         <h2 slot="pfe-card--header">Default card</h2>
         Unwrapped item. This is the default pfe-card and <a href="#">a link</a>.
 
@@ -127,10 +127,6 @@ class PfeCard extends PFElement {
     if (this.imageSrc) {
       this._imgSrcChanged("pfe-img-src", "", this.imageSrc);
     }
-    // Initialize the context setting for the children elements
-    if (this.backgroundColor) {
-      this._updateContext(this.backgroundColor);
-    }
 
     this._observer.observe(this, { childList: true });
   }
@@ -159,8 +155,7 @@ class PfeCard extends PFElement {
   // Update the color attribute and contexts
   _colorChanged(attr, oldValue, newValue) {
     this[attr].value = newValue;
-    // If the new value has a dark background, update children elements
-    this._updateContext(newValue);
+
   }
 
   // Update the background image
@@ -169,22 +164,6 @@ class PfeCard extends PFElement {
     this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;
   }
 
-  // Set the children's context if parent background is dark
-  _updateContext(context) {
-    if (
-      ["darkest", "darker", "dark", "complement", "accent"].includes(context)
-    ) {
-      ["pfe-cta"].forEach(elementName => {
-        const els = [...this.querySelectorAll(`${elementName}`)];
-        els.forEach(el => {
-          const myContainer = el.closest("[pfe-type=container]");
-          if (myContainer === this || myContainer === null) {
-            el.setAttribute("on", "dark");
-          }
-        });
-      });
-    }
-  }
 }
 
 PFElement.create(PfeCard);
 
@@ -1,4 +1,4 @@
-# WIP 🐣: PFElements CTA Element
+# PFElements Call-to-action Element
 
 `pfe-cta` is a call-to-action (CTA) element, that stands out from regular hypertext links, and is used for linking users to webpages.
 
@@ -10,11 +10,19 @@ _Note: `pfe-cta` is not a button, though it may look like one visually._
   <a href="https://github.com/">GitHub</a>
 </pfe-cta>
 
-<pfe-cta priority="primary">
+<pfe-cta pfe-priority="primary">
   <a href="https://pfelements.github.io/">Learn more about PFElements</a>
 </pfe-cta>
 
-<pfe-cta priority="secondary">
+<pfe-cta pfe-priority="secondary">
+  <a href="https://redhat.com/">Red Hat</a>
+</pfe-cta>
+
+<pfe-cta pfe-priority="primary" pfe-color="lightest">
+  <a href="https://pfelements.github.io/">Learn more about PFElements</a>
+</pfe-cta>
+
+<pfe-cta pfe-priority="secondary" pfe-color="complement">
   <a href="https://redhat.com/">Red Hat</a>
 </pfe-cta>
 ```
@@ -25,23 +33,33 @@ _Note: `pfe-cta` is not a button, though it may look like one visually._
 
 We expect an anchor tag, `<a>` with an `href`, to be the first child inside `pfe-cta` element.
 
-## Styling
-
-| Theme Var Hook | Description | Default |
-| -------------- | ----------- | ------- |
-| `--pfe-theme--color--ui-link` | Link color for default CTA | $pfe-color--ui-link |
-| `--pfe-theme--color--ui-link--hover` | Hover color for default CTA | $pfe-color--ui-link--hover |
-| `--pfe-theme--color--ui-link--focus` | Focus color for default CTA | $pfe-color--ui-link--focus |
-| `--pfe-theme--color--ui-accent` | Color for Primary CTA | $pfe-color--ui-accent |
-| `--pfe-theme--color--ui-accent--hover` | Hover color for Primary CTA | $pfe-color--ui-accent--hover |
-| `--pfe-theme--color--ui-accent--text` | Text color for Primary CTA | $pfe-color--ui-accent--text |
-| `--pfe-theme--color--ui-accent--text--hover` | Hover text color for Primary CTA | $pfe-color--ui-accent--text--hover |
-| `--pfe-theme--color--ui-base` | Border & text color for Secondary CTA | $pfe-color--ui-base |
-| `--pfe-theme--color--ui-base--hover` | Hover color for Secondary CTA | $pfe-color--ui-base--hover |
-| `--pfe-theme--color--ui-base--text` | Background color for Secondary CTA | $pfe-color--ui-base--text |
-| `--pfe-theme--color--ui-base--text--hover` | Hover text color for Secondary CTA | $pfe-color--ui-base--text--hover |
-| `--pfe-theme--color--text--on-dark` | Link color for default CTA with `on="dark"` | $pfe-color--text--on-dark |
-| `--pfe-theme--color--ui-link--on-dark--hover` | Hover color for default CTA with `on="dark"` | $pfe-color--ui-link--on-dark--hover |
+## Styling approach
+
+```
+    // 1. set up local vars equal to theme vars & fallbacks
+    :host {
+      --pfe-cta--Color: var(--pfe-theme--ui-link, #06c);
+    }
+
+    // 2. Use color property once, map to local var value
+    :host(:not([priority]) {
+      ::slotted(a) {
+         //color: blue; CSS compiler will print this for IE11
+         color: var(--pfe-cta--Color, blue) !important;
+      }
+    }
+
+    // 3. Use broadcasted variables as needed, with theme fallback after other declarations
+    :host {
+      --pfe-cta--Color: var(--pfe-broadcasted--ui-link, var(--pfe-theme--ui-link, #06c));
+    }
+
+    // 4. Override broadcasted last
+    [color="accent"] {
+      --pfe-cta--Color: var(--pfe-theme--ui-accent);
+    }
+```
+
 
 ### Testing Theme Var Hooks
 
@@ -50,10 +68,9 @@ If you'd like to checkout how theming is possible using our CSS Var hooks, try a
 ```html
 <style>
 :root {
-  --pfe-theme--color--ui-accent:               green;
-  --pfe-theme--color--ui-accent--hover:        darkgreen;
-  --pfe-theme--color--ui-accent--text:         white;
-  --pfe-theme--color--ui-accent--text--hover:  white;
+  --pfe-theme--color--ui-accent:         green;
+  --pfe-theme--color--ui-accent--hover:  darkgreen;
+  --pfe-theme--color--ui-accent--text:   white;
 }
 </style>
 ```
 
@@ -0,0 +1,66 @@
+
+  body {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  p {
+    font-family: var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);
+  }
+
+  h1,
+  h2 {
+    margin: 15px 0 10px;
+  }
+
+  pfe-band {
+    --pfe-band--Padding--horizontal: 60px;
+    --pfe-band--Width: 100%;
+  }
+
+  pfe-card {
+    display: grid;
+    grid-gap: 15px;
+    --pfe-card--Padding: 10px;
+  }
+
+  pfe-cta {
+    margin-top: 10px;
+    margin-left: 20px;
+  }
+
+  .force-wrap {
+      max-width: 100px;
+  }
+
+  .card-layout {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+
+  a {
+    color: #2290ff;
+  }
+
+  .custom-dark-band {
+    padding: 60px 15px;
+    background: #222;
+    --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, yellow);
+    --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, red);
+    --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, orange);
+    --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, pink);
+    --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, orange);
+  }
+
+  .custom-light-band {
+    padding: 60px 15px;
+    background: #cce7e8;
+  }
+
+  .custom-on-dark-band {
+    padding: 30px 15px;
+    background: #0d053e;
+  }