From 811b9ba479f62f41153078a17bebfc09d5db554a Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Mon, 16 Dec 2024 14:16:46 -0500
Subject: [PATCH 1/7] fix(audio-player): use rh-icon instead of custom svg for
 scrubbers

---
 elements/rh-audio-player/rh-audio-player.css |  9 ++++-----
 elements/rh-audio-player/rh-audio-player.ts  | 18 ++----------------
 2 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css
index 70878fcd54..da1383a840 100644
--- a/elements/rh-audio-player/rh-audio-player.css
+++ b/elements/rh-audio-player/rh-audio-player.css
@@ -114,10 +114,8 @@ rh-audio-player-rate-stepper {
   width: auto;
 }
 
-svg.scrubber {
-  fill: var(--_text-color);
-  height: var(--_svg-size);
-  width: var(--_svg-size);
+.scrubber {
+  color: var(--_text-color);
   padding: var(--_icon-padding);
 }
 
@@ -353,7 +351,8 @@ input[type='range'] {
 #full-play-tooltip,
 #mute-tooltip,
 #close-tooltip,
-#menu-tooltip {
+#menu-tooltip,
+.scrubber {
   --rh-icon-size: var(--rh-size-icon-02, 24px);
 }
 
diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
index 94400c495e..dfd112d50b 100644
--- a/elements/rh-audio-player/rh-audio-player.ts
+++ b/elements/rh-audio-player/rh-audio-player.ts
@@ -484,14 +484,7 @@ export class RhAudioPlayer extends LitElement {
                     class="toolbar-button"
                     ?disabled=${rewinddisabled}
                     @click=${() => this.rewind()}>
-              <svg xmlns="http://www.w3.org/2000/svg"
-                   viewBox="0 0 32 32"
-                   class="scrubber"
-                   role="presentation">
-                <path d="M10.4,19.5h1.8v-5l-1.8,0.8v-1l2.2-0.9h0.7v6.2h1.9v1h-4.8V19.5z"/>
-                <path d="M16.4,19.6l0.7-0.8c0.6,0.5,1.2,0.8,1.9,0.8c0.9,0,1.5-0.6,1.5-1.4c0-0.8-0.6-1.3-1.5-1.3 c-0.5,0-0.9,0.1-1.4,0.4L16.8,17l0.2-3.7h4.3v1h-3.3l-0.1,2c0.5-0.2,1-0.3,1.5-0.3c1.4,0,2.4,0.9,2.4,2.1c0,1.4-1.1,2.4-2.7,2.4 C18,20.5,17.1,20.2,16.4,19.6z"/>
-                <path d="M4,6.6L9.5,2v3.7h7.4c6.1,0,11.1,5,11.1,11.1c0,6.1-5,11.1-11.1,11.1H9.5V26h1.8h5.5 c5.1,0,9.2-4.1,9.2-9.2c0-5.1-4.1-9.2-9.2-9.2h-5.5H9.5v3.7L4,6.6z"/>
-              </svg>
+              <rh-icon set="ui" icon="undo" class="scrubber"></rh-icon>
             </button>
             <span slot="content">${this.#translation.get('rewind')}</span>
           </rh-tooltip>
@@ -514,14 +507,7 @@ export class RhAudioPlayer extends LitElement {
                     class="toolbar-button"
                     ?disabled=${forwarddisabled}
                     @click=${() => this.forward()}>
-              <svg xmlns="http://www.w3.org/2000/svg"
-                   viewBox="0 0 32 32"
-                   class="scrubber"
-                   role="presentation">
-                <path d="M10.4,19.5h1.8v-5l-1.8,0.8v-1l2.2-0.9h0.7v6.2h1.9v1h-4.8V19.5z"/>
-                <path d="M16.4,19.6l0.7-0.8c0.6,0.5,1.2,0.8,1.9,0.8c0.9,0,1.5-0.6,1.5-1.4c0-0.8-0.6-1.3-1.5-1.3 c-0.5,0-0.9,0.1-1.4,0.4L16.8,17l0.2-3.7h4.3v1h-3.3l-0.1,2c0.5-0.2,1-0.3,1.5-0.3c1.4,0,2.4,0.9,2.4,2.1c0,1.4-1.1,2.4-2.7,2.4 C18,20.5,17.1,20.2,16.4,19.6z"/>
-                <path d="M28,6.6L22.4,2v3.7h-7.4C9,5.7,4,10.6,4,16.7c0,6.1,5,11.1,11.1,11.1h7.4V26h-1.8h-5.5c-5.1,0-9.2-4.1-9.2-9.2 c0-5.1,4.1-9.2,9.2-9.2h5.5h1.8v3.7L28,6.6z"/>
-              </svg>
+              <rh-icon set="ui" icon="redo" class="scrubber"></rh-icon>
             </button>
             <span slot="content">${this.#translation.get('advance')}</span>
           </rh-tooltip>`}${!this.#hasMenu ? '' : html`

From 5cd8382db6b2b0392752c99319dbe78ed5b3d2b7 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Mon, 16 Dec 2024 14:22:12 -0500
Subject: [PATCH 2/7] chore(audio-player): add changeset

---
 .changeset/spotty-steaks-decide.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/spotty-steaks-decide.md

diff --git a/.changeset/spotty-steaks-decide.md b/.changeset/spotty-steaks-decide.md
new file mode 100644
index 0000000000..9db5a0755e
--- /dev/null
+++ b/.changeset/spotty-steaks-decide.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-audio-player>`: updated icons to use rh-icon

From 552f38faf2bd615157a7cb0af0cf43343722f52a Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 18 Dec 2024 15:17:23 -0500
Subject: [PATCH 3/7] fix(audio-player): remove unecessary rh-surface in
 shadowroot

---
 elements/rh-audio-player/rh-audio-player.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
index dfd112d50b..0318af27ab 100644
--- a/elements/rh-audio-player/rh-audio-player.ts
+++ b/elements/rh-audio-player/rh-audio-player.ts
@@ -29,7 +29,6 @@ import buttonStyles from './rh-audio-player-button.css';
 import rangeStyles from './rh-audio-player-range-styles.css';
 import styles from './rh-audio-player.css';
 
-import '@rhds/elements/rh-surface/rh-surface.js';
 import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 import '@rhds/elements/rh-icon/rh-icon.js';
 
@@ -366,8 +365,8 @@ export class RhAudioPlayer extends LitElement {
     const accentColor = !!this.#styles?.getPropertyValue('--rh-audio-player-background-color');
 
     return html`
-      <rh-surface id="container"
-          color-palette="${ifDefined(this.colorPalette)}"
+      <div id="container"
+          color-palette="${ifDefined(this.colorPalette ?? this.on)}"
           class="${classMap({
               [on]: true,
               [dir]: true,
@@ -586,7 +585,7 @@ export class RhAudioPlayer extends LitElement {
                 @transcriptdownload=${this.#onTranscriptDownload}>
           </slot>
         </div>
-      </rh-surface>
+      </div>
     `;
   }
 

From c1f057baeb25188cfa511560b8a022e9b67f88ad Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 18 Dec 2024 15:30:07 -0500
Subject: [PATCH 4/7] fix(audio-player): ensure play button has background
 circle

---
 elements/rh-audio-player/rh-audio-player.css | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css
index da1383a840..91159377e8 100644
--- a/elements/rh-audio-player/rh-audio-player.css
+++ b/elements/rh-audio-player/rh-audio-player.css
@@ -446,8 +446,20 @@ rh-menu > button:focus {
 #play,
 #full-play {
   border-radius: 50%;
-  background-color: var(--_surface-color);
-  color: var(--rh-audio-player-icon-background-color, var(--_text-color));
+  background-color: var(--rh-color-surface-darkest, #151515);
+  color:
+    var(--rh-audio-player-icon-background-color,
+      var(--rh-color-text-primary-on-dark, #ffffff));
+}
+
+.dark {
+  #play,
+  #full-play {
+    background-color: var(--rh-color-surface-lightest, #ffffff);
+    color:
+      var(--rh-audio-player-icon-background-color,
+        var(--rh-color-text-primary-on-light, #151515));
+  }
 }
 
 .expanded {

From 51ee59247e3693149cbb431f158fbb0b81ce6a87 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Thu, 19 Dec 2024 10:20:31 -0500
Subject: [PATCH 5/7] fix(audio-player): replace play button with rh-button
 variant=play

---
 elements/rh-audio-player/rh-audio-player.css | 33 ++++++++++++--------
 elements/rh-audio-player/rh-audio-player.ts  | 11 +++----
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css
index 91159377e8..9a17add56d 100644
--- a/elements/rh-audio-player/rh-audio-player.css
+++ b/elements/rh-audio-player/rh-audio-player.css
@@ -443,22 +443,29 @@ rh-menu > button:focus {
   text-align: right;
 }
 
-#play,
-#full-play {
-  border-radius: 50%;
-  background-color: var(--rh-color-surface-darkest, #151515);
-  color:
-    var(--rh-audio-player-icon-background-color,
-      var(--rh-color-text-primary-on-dark, #ffffff));
+#full-play::part(button) {
+  width: var(--_button-size);
+  height: var(--_button-size);
+}
+
+#play::part(button) {
+  --rh-icon-size: var(--rh-size-icon-01, 16px);
+
+  width: var(--_button-size);
+  height: var(--_button-size);
+}
+
+#play::part(button),
+#full-play::part(button) {
+  /* danger! overwriting an rh-button internal var, do what I say not as I do. */
+  --_play-background-color: var(--rh-color-surface-darkest, #151515);
 }
 
 .dark {
-  #play,
-  #full-play {
-    background-color: var(--rh-color-surface-lightest, #ffffff);
-    color:
-      var(--rh-audio-player-icon-background-color,
-        var(--rh-color-text-primary-on-light, #151515));
+  #play::part(button),
+  #full-play::part(button) {
+    /* danger! overwriting an rh-button internal var, do what I say not as I do. */
+    --_play-background-color: var(--rh-color-surface-lightest, #ffffff);
   }
 }
 
diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
index 0318af27ab..8f6bb92970 100644
--- a/elements/rh-audio-player/rh-audio-player.ts
+++ b/elements/rh-audio-player/rh-audio-player.ts
@@ -29,6 +29,7 @@ import buttonStyles from './rh-audio-player-button.css';
 import rangeStyles from './rh-audio-player-range-styles.css';
 import styles from './rh-audio-player.css';
 
+import '@rhds/elements/rh-button/rh-button.js';
 import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 import '@rhds/elements/rh-icon/rh-icon.js';
 
@@ -388,14 +389,13 @@ export class RhAudioPlayer extends LitElement {
              aria-label="Media Controls">${!poster ? '' : html`
           <div id="poster"><img .src="${poster}" aria-hidden="true"></div>`}
           <rh-tooltip id="play-tooltip">
-            <button id="play"
+            <rh-button variant="play" id="play"
                     aria-label="${playlabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement || playdisabled}
                     @click=${this.#onPlayClick}
                     @focus=${this.#onPlayFocus}>
-              <rh-icon set="ui" icon="${this.paused ? 'play-fill' : 'pause-fill'}"></rh-icon>
-            </button>
+            </rh-button>
             <span slot="content">${playlabel}</span>
           </rh-tooltip>
 
@@ -489,14 +489,13 @@ export class RhAudioPlayer extends LitElement {
           </rh-tooltip>
 
           <rh-tooltip id="full-play-tooltip">
-            <button id="full-play"
+            <rh-button variant="play" id="full-play"
                     aria-label="${playlabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement || playdisabled}
                     @click=${this.#onPlayClick}
                     @focus=${this.#onPlayFocus}>
-              <rh-icon set="ui" icon="${this.paused ? 'play-fill' : 'pause-fill'}"></rh-icon>
-            </button>
+            </rh-button>
             <span slot="content">${playlabel}</span>
           </rh-tooltip>
 

From eee8ef22c32e7fcd85e7b69026f07491650aa57d Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Thu, 19 Dec 2024 10:30:48 -0500
Subject: [PATCH 6/7] fix(audio-player): remove unused colorpalette now that
 surface was removed

---
 elements/rh-audio-player/rh-audio-player.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
index 8f6bb92970..7c4a09cfaa 100644
--- a/elements/rh-audio-player/rh-audio-player.ts
+++ b/elements/rh-audio-player/rh-audio-player.ts
@@ -367,7 +367,6 @@ export class RhAudioPlayer extends LitElement {
 
     return html`
       <div id="container"
-          color-palette="${ifDefined(this.colorPalette ?? this.on)}"
           class="${classMap({
               [on]: true,
               [dir]: true,

From e3e6baa70c066543224e7e4a3e0c42b0de9b6966 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Thu, 19 Dec 2024 11:51:56 -0500
Subject: [PATCH 7/7] fix(audio-player): revert usage of rh-button

---
 elements/rh-audio-player/rh-audio-player.css | 42 ++++++++++----------
 elements/rh-audio-player/rh-audio-player.ts  | 11 ++---
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css
index 9a17add56d..e78edd1e18 100644
--- a/elements/rh-audio-player/rh-audio-player.css
+++ b/elements/rh-audio-player/rh-audio-player.css
@@ -338,8 +338,8 @@ input[type='range'] {
 #play-tooltip {
   margin: 0;
 
-  --_icon-gap: 16px;
-  --rh-icon-size: 18px;
+  --_icon-gap: var(--rh-space-lg, 16px);
+  --rh-icon-size: var(--rh-size-icon-01, 16px);
 }
 
 #full-play-tooltip {
@@ -443,29 +443,31 @@ rh-menu > button:focus {
   text-align: right;
 }
 
-#full-play::part(button) {
-  width: var(--_button-size);
-  height: var(--_button-size);
-}
+#play,
+#full-play {
+  border-radius: 50%;
+  background-color: var(--rh-color-surface-darkest, #151515);
+  color:
+    var(--rh-audio-player-icon-background-color,
+      var(--rh-color-text-primary-on-dark, #ffffff));
 
-#play::part(button) {
-  --rh-icon-size: var(--rh-size-icon-01, 16px);
+  /* stylelint-disable-next-line no-descending-specificity */
+  & rh-icon {
+    translate: 0% 10%;
 
-  width: var(--_button-size);
-  height: var(--_button-size);
-}
-
-#play::part(button),
-#full-play::part(button) {
-  /* danger! overwriting an rh-button internal var, do what I say not as I do. */
-  --_play-background-color: var(--rh-color-surface-darkest, #151515);
+    &[icon='play-fill'] {
+      translate: 9% 10%;
+    }
+  }
 }
 
 .dark {
-  #play::part(button),
-  #full-play::part(button) {
-    /* danger! overwriting an rh-button internal var, do what I say not as I do. */
-    --_play-background-color: var(--rh-color-surface-lightest, #ffffff);
+  #play,
+  #full-play {
+    background-color: var(--rh-color-surface-lightest, #ffffff);
+    color:
+      var(--rh-audio-player-icon-background-color,
+        var(--rh-color-text-primary-on-light, #151515));
   }
 }
 
diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
index 7c4a09cfaa..543c9bdbac 100644
--- a/elements/rh-audio-player/rh-audio-player.ts
+++ b/elements/rh-audio-player/rh-audio-player.ts
@@ -29,7 +29,6 @@ import buttonStyles from './rh-audio-player-button.css';
 import rangeStyles from './rh-audio-player-range-styles.css';
 import styles from './rh-audio-player.css';
 
-import '@rhds/elements/rh-button/rh-button.js';
 import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 import '@rhds/elements/rh-icon/rh-icon.js';
 
@@ -388,13 +387,14 @@ export class RhAudioPlayer extends LitElement {
              aria-label="Media Controls">${!poster ? '' : html`
           <div id="poster"><img .src="${poster}" aria-hidden="true"></div>`}
           <rh-tooltip id="play-tooltip">
-            <rh-button variant="play" id="play"
+            <button id="play"
                     aria-label="${playlabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement || playdisabled}
                     @click=${this.#onPlayClick}
                     @focus=${this.#onPlayFocus}>
-            </rh-button>
+              <rh-icon set="ui" icon="${this.paused ? 'play-fill' : 'pause-fill'}"></rh-icon>
+            </button>
             <span slot="content">${playlabel}</span>
           </rh-tooltip>
 
@@ -488,13 +488,14 @@ export class RhAudioPlayer extends LitElement {
           </rh-tooltip>
 
           <rh-tooltip id="full-play-tooltip">
-            <rh-button variant="play" id="full-play"
+            <button id="full-play"
                     aria-label="${playlabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement || playdisabled}
                     @click=${this.#onPlayClick}
                     @focus=${this.#onPlayFocus}>
-            </rh-button>
+              <rh-icon set="ui" icon="${this.paused ? 'play-fill' : 'pause-fill'}"></rh-icon>
+            </button>
             <span slot="content">${playlabel}</span>
           </rh-tooltip>