From 87621ef1096b1c6ffa41e13f765ac513de49e927 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 02:22:08 -0500
Subject: [PATCH] Rename variant color tokens to be `wa-` prefixed, since we
 specify them on `:root` too

---
 src/styles/native/button.css      | 26 ++++-----
 src/styles/utilities/variants.css | 90 +++++++++++++++----------------
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/styles/native/button.css b/src/styles/native/button.css
index 6a9507e33..8aa8e9e73 100644
--- a/src/styles/native/button.css
+++ b/src/styles/native/button.css
@@ -1,7 +1,7 @@
 :is(button, input:where([type='button'], [type='reset'], [type='submit'])):where(:not(:host *, .wa-off, .wa-off *)),
 :host,
 .wa-button:where(:not([part~='base'])) {
-  --background-color: var(--color-fill-loud, var(--wa-color-neutral-fill-loud));
+  --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));
 
@@ -10,7 +10,7 @@
   --border-color-active: var(--border-color);
   --border-width: max(1px, var(--wa-form-control-border-width));
 
-  --label-color: var(--color-on-loud, var(--wa-color-neutral-on-loud));
+  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
   --label-color-hover: var(--label-color);
   --label-color-active: var(--label-color);
 
@@ -99,29 +99,29 @@ input:is([type='button'], [type='reset'], [type='submit']),
 .wa-outlined,
 :host([appearance~='outlined']) {
   --background-color: transparent;
-  --background-color-hover: var(--color-fill-quiet);
+  --background-color-hover: var(--wa-color-fill-quiet);
   --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
 
-  --border-color: var(--color-border-loud);
-  --border-color-hover: var(--color-border-loud);
+  --border-color: var(--wa-color-border-loud);
+  --border-color-hover: var(--wa-color-border-loud);
 
-  --label-color: var(--color-on-quiet);
-  --label-color-hover: var(--color-on-quiet);
+  --label-color: var(--wa-color-on-quiet);
+  --label-color-hover: var(--wa-color-on-quiet);
 }
 
 .wa-filled,
 :host([appearance~='filled']) {
-  --background-color: var(--color-fill-loud, var(--wa-color-neutral-fill-loud));
+  --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(--color-on-loud, var(--wa-color-neutral-on-loud));
+  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
 }
 
 .wa-tinted,
 :host([appearance~='tinted']) {
-  --background-color: var(--color-fill-normal, var(--wa-color-neutral-fill-normal));
-  --label-color: var(--color-on-normal, var(--wa-color-neutral-on-normal));
+  --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%);
@@ -130,9 +130,9 @@ input:is([type='button'], [type='reset'], [type='submit']),
 .wa-text,
 :host([appearance~='text']) {
   --background-color: transparent;
-  --label-color: var(--color-on-quiet);
+  --label-color: var(--wa-color-on-quiet);
 
-  --background-color-hover: var(--color-fill-quiet);
+  --background-color-hover: var(--wa-color-fill-quiet);
   --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
 }
 
diff --git a/src/styles/utilities/variants.css b/src/styles/utilities/variants.css
index ff05a7e19..475b681ef 100644
--- a/src/styles/utilities/variants.css
+++ b/src/styles/utilities/variants.css
@@ -1,75 +1,75 @@
 .wa-neutral,
 :host([variant='neutral']),
 :root {
-  --color-fill-loud: var(--wa-color-neutral-fill-loud);
-  --color-fill-normal: var(--wa-color-neutral-fill-normal);
-  --color-fill-quiet: var(--wa-color-neutral-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
 
-  --color-border-loud: var(--wa-color-neutral-border-loud);
-  --color-border-normal: var(--wa-color-neutral-border-normal);
-  --color-border-quiet: var(--wa-color-neutral-border-quiet);
+  --wa-color-border-loud: var(--wa-color-neutral-border-loud);
+  --wa-color-border-normal: var(--wa-color-neutral-border-normal);
+  --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
 
-  --color-on-loud: var(--wa-color-neutral-on-loud);
-  --color-on-normal: var(--wa-color-neutral-on-normal);
-  --color-on-quiet: var(--wa-color-neutral-on-quiet);
+  --wa-color-on-loud: var(--wa-color-neutral-on-loud);
+  --wa-color-on-normal: var(--wa-color-neutral-on-normal);
+  --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
 }
 
 .wa-brand,
 :host([variant='brand']) {
-  --color-fill-loud: var(--wa-color-brand-fill-loud);
-  --color-fill-normal: var(--wa-color-brand-fill-normal);
-  --color-fill-quiet: var(--wa-color-brand-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
 
-  --color-border-loud: var(--wa-color-brand-border-loud);
-  --color-border-normal: var(--wa-color-brand-border-normal);
-  --color-border-quiet: var(--wa-color-brand-border-quiet);
+  --wa-color-border-loud: var(--wa-color-brand-border-loud);
+  --wa-color-border-normal: var(--wa-color-brand-border-normal);
+  --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
 
-  --color-on-loud: var(--wa-color-brand-on-loud);
-  --color-on-normal: var(--wa-color-brand-on-normal);
-  --color-on-quiet: var(--wa-color-brand-on-quiet);
+  --wa-color-on-loud: var(--wa-color-brand-on-loud);
+  --wa-color-on-normal: var(--wa-color-brand-on-normal);
+  --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
 }
 
 .wa-success,
 :host([variant='success']) {
-  --color-fill-loud: var(--wa-color-success-fill-loud);
-  --color-fill-normal: var(--wa-color-success-fill-normal);
-  --color-fill-quiet: var(--wa-color-success-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-success-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-success-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
 
-  --color-border-loud: var(--wa-color-success-border-loud);
-  --color-border-normal: var(--wa-color-success-border-normal);
-  --color-border-quiet: var(--wa-color-success-border-quiet);
+  --wa-color-border-loud: var(--wa-color-success-border-loud);
+  --wa-color-border-normal: var(--wa-color-success-border-normal);
+  --wa-color-border-quiet: var(--wa-color-success-border-quiet);
 
-  --color-on-loud: var(--wa-color-success-on-loud);
-  --color-on-normal: var(--wa-color-success-on-normal);
-  --color-on-quiet: var(--wa-color-success-on-quiet);
+  --wa-color-on-loud: var(--wa-color-success-on-loud);
+  --wa-color-on-normal: var(--wa-color-success-on-normal);
+  --wa-color-on-quiet: var(--wa-color-success-on-quiet);
 }
 
 .wa-warning,
 :host([variant='warning']) {
-  --color-fill-loud: var(--wa-color-warning-fill-loud);
-  --color-fill-normal: var(--wa-color-warning-fill-normal);
-  --color-fill-quiet: var(--wa-color-warning-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
 
-  --color-border-loud: var(--wa-color-warning-border-loud);
-  --color-border-normal: var(--wa-color-warning-border-normal);
-  --color-border-quiet: var(--wa-color-warning-border-quiet);
+  --wa-color-border-loud: var(--wa-color-warning-border-loud);
+  --wa-color-border-normal: var(--wa-color-warning-border-normal);
+  --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
 
-  --color-on-loud: var(--wa-color-warning-on-loud);
-  --color-on-normal: var(--wa-color-warning-on-normal);
-  --color-on-quiet: var(--wa-color-warning-on-quiet);
+  --wa-color-on-loud: var(--wa-color-warning-on-loud);
+  --wa-color-on-normal: var(--wa-color-warning-on-normal);
+  --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
 }
 
 .wa-danger,
 :host([variant='danger']) {
-  --color-fill-loud: var(--wa-color-danger-fill-loud);
-  --color-fill-normal: var(--wa-color-danger-fill-normal);
-  --color-fill-quiet: var(--wa-color-danger-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
 
-  --color-border-loud: var(--wa-color-danger-border-loud);
-  --color-border-normal: var(--wa-color-danger-border-normal);
-  --color-border-quiet: var(--wa-color-danger-border-quiet);
+  --wa-color-border-loud: var(--wa-color-danger-border-loud);
+  --wa-color-border-normal: var(--wa-color-danger-border-normal);
+  --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
 
-  --color-on-loud: var(--wa-color-danger-on-loud);
-  --color-on-normal: var(--wa-color-danger-on-normal);
-  --color-on-quiet: var(--wa-color-danger-on-quiet);
+  --wa-color-on-loud: var(--wa-color-danger-on-loud);
+  --wa-color-on-normal: var(--wa-color-danger-on-normal);
+  --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
 }