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

@@ -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
 

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');

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,