From 817f52ae7f4dc95293cead903e8c8b011cc94b8e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 14 Dec 2020 16:40:39 -0500
Subject: [PATCH] Fix toggle button styles in dark mode

---
 src/components/color-picker/color-picker.tsx | 4 ++--
 themes/dark.css                              | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index cff580de..113f1761 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -18,7 +18,7 @@ import { clamp } from '../../utilities/math';
  * @part slider-handle - Hue and opacity slider handles.
  * @part preview - The preview color.
  * @part input - The text input.
- * @part format-button - The toggle format button.
+ * @part format-button - The toggle format button's base.
  */
 
 @Component({
@@ -802,7 +802,7 @@ export class ColorPicker {
             />
 
             {!this.noToggle && (
-              <sl-button part="format-button" size="small" onClick={this.handleFormatToggle}>
+              <sl-button exportparts="base:format-button" size="small" onClick={this.handleFormatToggle}>
                 {this.setLetterCase(this.format)}
               </sl-button>
             )}
diff --git a/themes/dark.css b/themes/dark.css
index 91a174db..b590450a 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -232,19 +232,19 @@
 }
 
 /* Color picker */
-.sl-theme-dark sl-color-picker::part(copy-button) {
+.sl-theme-dark sl-color-picker::part(format-button) {
   background-color: var(--sl-color-gray-10);
   border-color: var(--sl-color-gray-30);
   color: var(--sl-color-gray-60);
 }
 
-.sl-theme-dark sl-color-picker::part(copy-button):hover {
+.sl-theme-dark sl-color-picker::part(format-button):hover {
   background-color: var(--sl-color-primary-15);
   border-color: var(--sl-color-primary-30);
   color: var(--sl-color-primary-60);
 }
 
-.sl-theme-dark sl-color-picker::part(copy-button):focus {
+.sl-theme-dark sl-color-picker::part(format-button):focus {
   background-color: var(--sl-color-primary-15);
   border-color: var(--sl-color-primary-30);
   color: var(--sl-color-primary-60);
@@ -252,7 +252,7 @@
     hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
 }
 
-.sl-theme-dark sl-color-picker::part(copy-button):active {
+.sl-theme-dark sl-color-picker::part(format-button):active {
   background-color: var(--sl-color-primary-15);
   border-color: var(--sl-color-primary-40);
   color: var(--sl-color-primary-70);