From f39308dbc54b29f9010299b9ae3a72ae29445860 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 6 Jan 2025 17:35:57 -0500
Subject: [PATCH] Allow customization of outlined styles, fixes #412 (#426)

---
 src/components/input/input.css       |  1 +
 src/components/textarea/textarea.css | 13 ++++++----
 src/styles/native/input.css          | 21 ++++++++++------
 src/styles/utilities/appearance.css  | 36 +++++++++++++---------------
 4 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/src/components/input/input.css b/src/components/input/input.css
index b1f6a1f2d..2b0c96392 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -30,6 +30,7 @@ input {
   background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
   height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
   padding-block: 0;
+  color: inherit;
 }
 
 input::-webkit-search-decoration,
diff --git a/src/components/textarea/textarea.css b/src/components/textarea/textarea.css
index d944cd47c..413e53aaf 100644
--- a/src/components/textarea/textarea.css
+++ b/src/components/textarea/textarea.css
@@ -13,10 +13,15 @@
   transition: inherit;
 }
 
-textarea[part] {
-  padding: var(--wa-space);
-  border-radius: inherit;
-  border: var(--border-width) solid transparent; /* make resizer look a little nicer */
+textarea {
+  background-color: transparent;
+  color: inherit;
+
+  &[part] {
+    padding: var(--wa-space);
+    border-radius: inherit;
+    border: var(--border-width) solid transparent; /* make resizer look a little nicer */
+  }
 }
 
 textarea,
diff --git a/src/styles/native/input.css b/src/styles/native/input.css
index 04aab5ce3..e8d5b6bbe 100644
--- a/src/styles/native/input.css
+++ b/src/styles/native/input.css
@@ -14,13 +14,20 @@ input:where(:not(
     [type='reset'],
     [type='submit']
   )) {
-  :where(&:not(:host *)) {
-    /* Defaults for root element with 0 specificity.
-     * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
-     * Instead we provide the fallback when setting
-     */
-    --border-width: var(--wa-form-control-border-width);
-    --box-shadow: initial;
+  &:not(:host *) {
+    /* Defaults for root element. */
+    --outlined-background-color: var(--wa-form-control-background-color);
+    --outlined-border-color: var(--wa-form-control-resting-color);
+    --outlined-text-color: var(--wa-form-control-value-color);
+
+    :where(&) {
+      /* Defaults with 0 specificity.
+       * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
+       * Instead we provide the fallback when setting
+       */
+      --border-width: var(--wa-form-control-border-width);
+      --box-shadow: initial;
+    }
   }
 
   /* Style native inputs and <wa-input>'s visible container */
diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css
index b0c73db5a..539bb2803 100644
--- a/src/styles/utilities/appearance.css
+++ b/src/styles/utilities/appearance.css
@@ -1,14 +1,17 @@
 .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%);
+  --background-color: var(--outlined-background-color, transparent);
+  --background-color-hover: var(--outlined-background-color-hover, var(--wa-color-fill-quiet));
+  --background-color-active: var(
+    --outlined-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);
+  --border-color: var(--outlined-border-color, var(--wa-color-border-loud));
+  --border-color-hover: var(--outlined-border-color-hover, var(--wa-color-border-loud));
 
-  --text-color: var(--wa-color-on-quiet);
-  --text-color-hover: var(--wa-color-on-quiet);
+  --text-color: var(--outlined-text-color, var(--wa-color-on-quiet));
+  --text-color-hover: var(--outlined-text-color-hover, var(--text-color));
 }
 
 .wa-accent,
@@ -17,32 +20,27 @@
   --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));
 
-  --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+  --outlined-border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
 
-  &:is(.wa-outlined, :host([appearance~='outlined'])) {
-    --border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
-  }
+  --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
 }
 
 .wa-filled,
 :host([appearance~='filled']) {
   --background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
-  --border-color: transparent;
-  --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-
   --background-color-hover: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
   --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
 
-  &:is(.wa-outlined, :host([appearance~='outlined'])) {
-    --border-color: var(--wa-color-border-normal);
-  }
+  --outlined-border-color: var(--wa-color-border-normal);
+
+  --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
 }
 
 .wa-plain,
 :host([appearance~='plain']) {
   --background-color: transparent;
-  --text-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%);
+
+  --text-color: var(--wa-color-on-quiet);
 }