From cbab3b09e51c0272a290c7d59a0fc18550c70262 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:03:55 -0500
Subject: [PATCH] Move appearance utils to separate file

---
 src/components/button/button.ts     |  3 ++-
 src/styles/applied.css              |  1 +
 src/styles/native/button.css        | 40 -----------------------------
 src/styles/utilities/appearance.css | 39 ++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 41 deletions(-)
 create mode 100644 src/styles/utilities/appearance.css

diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index a03ad120e..a6eb62b82 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -10,6 +10,7 @@ import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/button.css';
 import sizeStyles from '../../styles/shadow/size.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -52,7 +53,7 @@ import styles from './button.css';
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [variantStyles, sizeStyles, nativeStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
 
   static get validators() {
     return [...super.validators, MirrorValidator()];
diff --git a/src/styles/applied.css b/src/styles/applied.css
index fadc9b0fe..8fd9ce9da 100644
--- a/src/styles/applied.css
+++ b/src/styles/applied.css
@@ -10,6 +10,7 @@
 
 @import url('shadow/size.css');
 @import url('utilities/variants.css');
+@import url('utilities/appearance.css');
 
 /**
  * Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on
diff --git a/src/styles/native/button.css b/src/styles/native/button.css
index 8aa8e9e73..e7016fd1d 100644
--- a/src/styles/native/button.css
+++ b/src/styles/native/button.css
@@ -96,46 +96,6 @@ input:is([type='button'], [type='reset'], [type='submit']),
 
 /* Styles */
 
-.wa-outlined,
-:host([appearance~='outlined']) {
-  --background-color: transparent;
-  --background-color-hover: var(--wa-color-fill-quiet);
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-
-  --border-color: var(--wa-color-border-loud);
-  --border-color-hover: var(--wa-color-border-loud);
-
-  --label-color: var(--wa-color-on-quiet);
-  --label-color-hover: var(--wa-color-on-quiet);
-}
-
-.wa-filled,
-:host([appearance~='filled']) {
-  --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
-  --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
-  --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
-
-  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-}
-
-.wa-tinted,
-:host([appearance~='tinted']) {
-  --background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-  --label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-
-  --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
-  --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
-}
-
-.wa-text,
-:host([appearance~='text']) {
-  --background-color: transparent;
-  --label-color: var(--wa-color-on-quiet);
-
-  --background-color-hover: var(--wa-color-fill-quiet);
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-}
-
 .wa-pill,
 :host([pill]) {
   border-radius: var(--wa-border-radius-pill);
diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css
new file mode 100644
index 000000000..7e4512548
--- /dev/null
+++ b/src/styles/utilities/appearance.css
@@ -0,0 +1,39 @@
+.wa-outlined,
+:host([appearance~='outlined']) {
+  --background-color: transparent;
+  --background-color-hover: var(--wa-color-fill-quiet);
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
+
+  --border-color: var(--wa-color-border-loud);
+  --border-color-hover: var(--wa-color-border-loud);
+
+  --label-color: var(--wa-color-on-quiet);
+  --label-color-hover: var(--wa-color-on-quiet);
+}
+
+.wa-filled,
+:host([appearance~='filled']) {
+  --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+  --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
+  --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
+
+  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+}
+
+.wa-tinted,
+:host([appearance~='tinted']) {
+  --background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+  --label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+
+  --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
+  --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
+}
+
+.wa-text,
+:host([appearance~='text']) {
+  --background-color: transparent;
+  --label-color: var(--wa-color-on-quiet);
+
+  --background-color-hover: var(--wa-color-fill-quiet);
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
+}