From b97110b5625900e7afb6b1f255be34b00946d582 Mon Sep 17 00:00:00 2001
From: heyMP <mgp140@gmail.com>
Date: Mon, 25 Jan 2021 14:53:08 -0500
Subject: [PATCH 1/3] feat: adding icon color variable

---
 elements/pfe-clipboard/README.md              | 1 +
 elements/pfe-clipboard/demo/index.html        | 4 ++--
 elements/pfe-clipboard/src/pfe-clipboard.html | 2 +-
 elements/pfe-clipboard/src/pfe-clipboard.scss | 7 +++++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/elements/pfe-clipboard/README.md b/elements/pfe-clipboard/README.md
index d021f4c743..225e368208 100644
--- a/elements/pfe-clipboard/README.md
+++ b/elements/pfe-clipboard/README.md
@@ -82,6 +82,7 @@ Available hooks for styling:
 | `--icon--Width` | `16px` | `icon` |
 | `--icon--Height` | `auto` | `icon` |
 | `--icon--margin` | `0 0.4825rem 0 0` | `icon` |
+| `--icon--Color` | `#6a6e73` | `icon` |
 | `--pfe-clipboard--Color--focus` | `var(--pfe-broadcasted--link--focus, #004080)` | N/A |
 | `--pfe-clipboard--Color--hover` | `var(--pfe-broadcasted--link--hover, #004080)` | N/A |
 
diff --git a/elements/pfe-clipboard/demo/index.html b/elements/pfe-clipboard/demo/index.html
index cc8d39a274..fed87e9f85 100644
--- a/elements/pfe-clipboard/demo/index.html
+++ b/elements/pfe-clipboard/demo/index.html
@@ -66,7 +66,7 @@ <h2>Clipboard w/ noIcon</h2>
 
     <h2>Clipboard: w/ custom icon</h2>
     <pfe-clipboard role="button" tabindex="0">
-      <pfe-icon slot="icon" icon="web-icon-globe" color="darker"></pfe-icon>
+      <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
     </pfe-clipboard>
 
     <h2>Clipboard: w/ custom text</h2>
@@ -90,7 +90,7 @@ <h2>Clipboard w/ noIcon</h2>
 
     <h2>Clipboard: w/ custom icon</h2>
     <pfe-clipboard role="button" tabindex="0">
-      <pfe-icon slot="icon" icon="web-icon-globe" color="lightest"></pfe-icon>
+      <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
     </pfe-clipboard>
 
     <h2>Clipboard: w/ custom text</h2>
diff --git a/elements/pfe-clipboard/src/pfe-clipboard.html b/elements/pfe-clipboard/src/pfe-clipboard.html
index b0ffe293e8..491ebed657 100644
--- a/elements/pfe-clipboard/src/pfe-clipboard.html
+++ b/elements/pfe-clipboard/src/pfe-clipboard.html
@@ -2,7 +2,7 @@
 ${!this.noIcon ? `
     <div class="pfe-clipboard__icon">
         <slot name="icon" id="icon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 15.277 16"><defs><style>.a{fill:#6a6e73;}</style></defs><g transform="translate(-2.077 -1.807)"><path class="a" d="M15.34,2.879a3.86,3.86,0,0,0-5.339,0L6.347,6.545a3.769,3.769,0,0,0,0,5.339.81.81,0,0,0,1.132,0,.823.823,0,0,0,0-1.145A2.144,2.144,0,0,1,7.5,7.677l3.641-3.654a2.161,2.161,0,1,1,3.049,3.062l-.8.8a.811.811,0,1,0,1.145,1.132l.8-.8a3.769,3.769,0,0,0,0-5.339Z" transform="translate(0.906 0)"/><path class="a" d="M10.482,6.822a.823.823,0,0,0,0,1.145,2.161,2.161,0,0,1,0,3.049L7.343,14.155a2.161,2.161,0,0,1-3.062,0,2.187,2.187,0,0,1,0-3.062l.193-.116a.823.823,0,0,0,0-1.145.811.811,0,0,0-1.132,0l-.193.193a3.86,3.86,0,0,0,0,5.339,3.86,3.86,0,0,0,5.339,0l3.126-3.139A3.731,3.731,0,0,0,12.72,9.562a3.769,3.769,0,0,0-1.094-2.74A.823.823,0,0,0,10.482,6.822Z" transform="translate(0 1.37)"/></g></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 15.277 16"><g transform="translate(-2.077 -1.807)"><path class="a" d="M15.34,2.879a3.86,3.86,0,0,0-5.339,0L6.347,6.545a3.769,3.769,0,0,0,0,5.339.81.81,0,0,0,1.132,0,.823.823,0,0,0,0-1.145A2.144,2.144,0,0,1,7.5,7.677l3.641-3.654a2.161,2.161,0,1,1,3.049,3.062l-.8.8a.811.811,0,1,0,1.145,1.132l.8-.8a3.769,3.769,0,0,0,0-5.339Z" transform="translate(0.906 0)"/><path class="a" d="M10.482,6.822a.823.823,0,0,0,0,1.145,2.161,2.161,0,0,1,0,3.049L7.343,14.155a2.161,2.161,0,0,1-3.062,0,2.187,2.187,0,0,1,0-3.062l.193-.116a.823.823,0,0,0,0-1.145.811.811,0,0,0-1.132,0l-.193.193a3.86,3.86,0,0,0,0,5.339,3.86,3.86,0,0,0,5.339,0l3.126-3.139A3.731,3.731,0,0,0,12.72,9.562a3.769,3.769,0,0,0-1.094-2.74A.823.823,0,0,0,10.482,6.822Z" transform="translate(0 1.37)"/></g></svg>
         </slot>
     </div>
 ` : ""}
diff --git a/elements/pfe-clipboard/src/pfe-clipboard.scss b/elements/pfe-clipboard/src/pfe-clipboard.scss
index 2937639bc8..5098c6531e 100644
--- a/elements/pfe-clipboard/src/pfe-clipboard.scss
+++ b/elements/pfe-clipboard/src/pfe-clipboard.scss
@@ -15,6 +15,7 @@ $LOCAL-VARIABLES: (
   icon--Width: pfe-var(icon-size),
   icon--Height: auto,
   icon--Margin: 0 0.4825rem 0 0, // 7.72px
+  icon--Color: #6a6e73
 );
 
 :host {
@@ -40,6 +41,12 @@ $LOCAL-VARIABLES: (
     // This is needed if the icon isn't square
     height: pfe-local(icon--Height);
     margin: pfe-local(icon--Margin);
+    // Customize icon color for pfe-icons
+    --pfe-icon--color: #{pfe-local(icon--Color)};
+    svg {
+      // Customize icon color of fallback svg icon
+      fill: pfe-local(icon--Color) !important;
+    }
   }
   &__text {
     font-size: pfe-local(FontSize) !important;

From 8a19c407e5fca8f69c2850d3ffe5100471d4a1a4 Mon Sep 17 00:00:00 2001
From: heyMP <mgp140@gmail.com>
Date: Mon, 25 Jan 2021 15:15:28 -0500
Subject: [PATCH 2/3] feat: fixed variable names on readme, corrected
 pfe-icon--Color

---
 elements/pfe-clipboard/README.md              | 8 ++++----
 elements/pfe-clipboard/src/pfe-clipboard.scss | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/elements/pfe-clipboard/README.md b/elements/pfe-clipboard/README.md
index 225e368208..0c9a4f8f79 100644
--- a/elements/pfe-clipboard/README.md
+++ b/elements/pfe-clipboard/README.md
@@ -79,10 +79,10 @@ Available hooks for styling:
 | `--pfe-clipboard--FontWeight` | `var(--pfe-theme--font-weight--light, 300)` | N/A |
 | `--pfe-clipboard--FontSize` | `1rem` | N/A |
 | `--pfe-clipboard--Padding` | `6px 16px` | N/A |
-| `--icon--Width` | `16px` | `icon` |
-| `--icon--Height` | `auto` | `icon` |
-| `--icon--margin` | `0 0.4825rem 0 0` | `icon` |
-| `--icon--Color` | `#6a6e73` | `icon` |
+| `--pfe-clipboard--icon--Width` | `16px` | `icon` |
+| `--pfe-clipboard--icon--Height` | `auto` | `icon` |
+| `--pfe-clipboard--icon--margin` | `0 0.4825rem 0 0` | `icon` |
+| `--pfe-clipboard--icon--Color` | `#6a6e73` | `icon` |
 | `--pfe-clipboard--Color--focus` | `var(--pfe-broadcasted--link--focus, #004080)` | N/A |
 | `--pfe-clipboard--Color--hover` | `var(--pfe-broadcasted--link--hover, #004080)` | N/A |
 
diff --git a/elements/pfe-clipboard/src/pfe-clipboard.scss b/elements/pfe-clipboard/src/pfe-clipboard.scss
index 5098c6531e..3558758cba 100644
--- a/elements/pfe-clipboard/src/pfe-clipboard.scss
+++ b/elements/pfe-clipboard/src/pfe-clipboard.scss
@@ -42,7 +42,7 @@ $LOCAL-VARIABLES: (
     height: pfe-local(icon--Height);
     margin: pfe-local(icon--Margin);
     // Customize icon color for pfe-icons
-    --pfe-icon--color: #{pfe-local(icon--Color)};
+    --pfe-icon--Color: #{pfe-local(icon--Color)};
     svg {
       // Customize icon color of fallback svg icon
       fill: pfe-local(icon--Color) !important;

From d293fb96ed42eb07bea927daab058df02da011ba Mon Sep 17 00:00:00 2001
From: heyMP <mgp140@gmail.com>
Date: Mon, 25 Jan 2021 15:19:41 -0500
Subject: [PATCH 3/3] feat: tie text--muted color variable to icon--Color

---
 elements/pfe-clipboard/src/pfe-clipboard.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pfe-clipboard/src/pfe-clipboard.scss b/elements/pfe-clipboard/src/pfe-clipboard.scss
index 3558758cba..dcd51b3903 100644
--- a/elements/pfe-clipboard/src/pfe-clipboard.scss
+++ b/elements/pfe-clipboard/src/pfe-clipboard.scss
@@ -15,7 +15,7 @@ $LOCAL-VARIABLES: (
   icon--Width: pfe-var(icon-size),
   icon--Height: auto,
   icon--Margin: 0 0.4825rem 0 0, // 7.72px
-  icon--Color: #6a6e73
+  icon--Color: pfe-var(text--muted)
 );
 
 :host {