From 48fe9389c8db9ef7df5b99b25895ee74c345bbdc Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 3 Jun 2025 15:10:15 -0400
Subject: [PATCH] Use outlined appearance for buttons in `<wa-color-picker>`
 (#1021)

* use outlined appearance for buttons

* don't override child element's size
---
 packages/webawesome/docs/docs/resources/changelog.md          | 1 +
 .../webawesome/src/components/button-group/button-group.ts    | 4 ++--
 .../webawesome/src/components/color-picker/color-picker.ts    | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 54ec19beb..4512ddac1 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -39,6 +39,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Fixed a bug in `<wa-details>` and native `<details>` styles that made the summary hard to click [issue:684]
 - Improved CSS utilities and Native Styles to use [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for easier end user customization (no more specificity conflicts — your CSS wins!)
 - Improved native `<button>` styles to properly space icons
+- Improved button appearances in `<wa-color-picker>`
 - Improved `<wa-rating>` to have more accessible icons by default
 - Removed the experimental `<wa-code-demo>` component
 
diff --git a/packages/webawesome/src/components/button-group/button-group.ts b/packages/webawesome/src/components/button-group/button-group.ts
index 0f2cefab9..0ce7f17c6 100644
--- a/packages/webawesome/src/components/button-group/button-group.ts
+++ b/packages/webawesome/src/components/button-group/button-group.ts
@@ -37,7 +37,7 @@ export default class WaButtonGroup extends WebAwesomeElement {
   @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
 
   /** The component's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large'; // unset by default to not override child elements
 
   /** The button group's theme variant. Defaults to `neutral` if not within another element with a variant. */
   @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
@@ -85,7 +85,7 @@ export default class WaButtonGroup extends WebAwesomeElement {
 
       if (button) {
         if ((button as WaButton).appearance === 'outlined') this.hasOutlined = true;
-        button.setAttribute('size', this.size);
+        if (this.size) button.setAttribute('size', this.size);
         button.classList.add('wa-button-group__button');
         button.classList.toggle('wa-button-group__horizontal', this.orientation === 'horizontal');
         button.classList.toggle('wa-button-group__vertical', this.orientation === 'vertical');
diff --git a/packages/webawesome/src/components/color-picker/color-picker.ts b/packages/webawesome/src/components/color-picker/color-picker.ts
index 6d8631acd..2943fc5fa 100644
--- a/packages/webawesome/src/components/color-picker/color-picker.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.ts
@@ -1017,6 +1017,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                   <wa-button
                     part="format-button"
                     size="small"
+                    appearance="outlined"
                     aria-label=${this.localize.term('toggleColorFormat')}
                     exportparts="
                       base:format-button__base,
@@ -1038,6 +1039,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                   <wa-button
                     part="eye-dropper-button"
                     size="small"
+                    appearance="outlined"
                     exportparts="
                       base:eye-dropper-button__base,
                       prefix:eye-dropper-button__prefix,