From f5ed55513b0bd0d11cc72366ed1d7367cc63cb23 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 18 Dec 2024 12:51:13 -0500
Subject: [PATCH] =?UTF-8?q?`text`=E2=86=92`plain`=20(for=20`appearance`=20?=
 =?UTF-8?q?and=20utils)=20rel=20#330?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/_includes/base-wide.njk        |  2 +-
 docs/_includes/base.njk             |  2 +-
 docs/docs/components/button.md      | 10 +++++-----
 docs/docs/essentials/button.md      | 10 +++++-----
 docs/docs/essentials/dialog.md      |  2 +-
 docs/docs/experimental/sandbox.md   |  2 +-
 docs/docs/experimental/themer.md    |  2 +-
 docs/docs/patterns/ecommerce.md     | 12 ++++++------
 src/components/button/button.ts     |  2 +-
 src/components/page/page.ts         |  2 +-
 src/styles/depth/2_chunky.css       |  2 +-
 src/styles/depth/3_punchy.css       |  2 +-
 src/styles/depth/4_glossy.css       |  5 +++--
 src/styles/themes/fa.css            |  2 +-
 src/styles/utilities/appearance.css |  4 ++--
 15 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/docs/_includes/base-wide.njk b/docs/_includes/base-wide.njk
index 33c4f9bce..74b3af98a 100644
--- a/docs/_includes/base-wide.njk
+++ b/docs/_includes/base-wide.njk
@@ -43,7 +43,7 @@
     <wa-page>
       <header slot="header">
         {# Nav toggle #}
-        <wa-button variant="text" data-toggle-nav>
+        <wa-button appearance="plain" data-toggle-nav>
           <wa-icon name="bars" label="Toggle navigation"></wa-icon>
         </wa-button>
 
diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index d286a73c6..27ad0e557 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -89,7 +89,7 @@
         {# Logo #}
         <div id="docs-branding">
           {# Nav toggle #}
-          <wa-button appearance="text" size="small" data-toggle-nav>
+          <wa-button appearance="plain" size="small" data-toggle-nav>
             <wa-icon name="bars" label="Toggle navigation"></wa-icon>
           </wa-button>
 
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index a56e58811..501d444dd 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -32,31 +32,31 @@ Use the `appearance` attribute to change the button's visual appearance.
   <wa-button appearance="filled" variant="neutral">Filled</wa-button>
   <wa-button appearance="tinted" variant="neutral">Tinted</wa-button>
   <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
-  <wa-button appearance="text" variant="neutral">Text</wa-button>
+  <wa-button appearance="plain" variant="neutral">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-button appearance="filled" variant="brand">Filled</wa-button>
   <wa-button appearance="tinted" variant="brand">Tinted</wa-button>
   <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
-  <wa-button appearance="text" variant="brand">Text</wa-button>
+  <wa-button appearance="plain" variant="brand">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-button appearance="filled" variant="success">Filled</wa-button>
   <wa-button appearance="tinted" variant="success">Tinted</wa-button>
   <wa-button appearance="outlined" variant="success">Outlined</wa-button>
-  <wa-button appearance="text" variant="success">Text</wa-button>
+  <wa-button appearance="plain" variant="success">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-button appearance="filled" variant="warning">Filled</wa-button>
   <wa-button appearance="tinted" variant="warning">Tinted</wa-button>
   <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
-  <wa-button appearance="text" variant="warning">Text</wa-button>
+  <wa-button appearance="plain" variant="warning">Text</wa-button>
 </div>
 <div>
   <wa-button appearance="filled" variant="danger">Filled</wa-button>
   <wa-button appearance="tinted" variant="danger">Tinted</wa-button>
   <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
-  <wa-button appearance="text" variant="danger">Text</wa-button>
+  <wa-button appearance="plain" variant="danger">Text</wa-button>
 </div>
 ```
 
diff --git a/docs/docs/essentials/button.md b/docs/docs/essentials/button.md
index c69529e6c..9756cf8ec 100644
--- a/docs/docs/essentials/button.md
+++ b/docs/docs/essentials/button.md
@@ -35,31 +35,31 @@ Use the appearance utility classes to change the button's visual appearance:
   <button class="wa-filled wa-neutral">Filled</button>
   <button class="wa-tinted wa-neutral">Tinted</button>
   <button class="wa-outlined wa-neutral">Outlined</button>
-  <button class="wa-text wa-neutral">Text</button>
+  <button class="wa-plain wa-neutral">Text</button>
 </div>
 <div style="margin-block-end: 1rem;">
   <button class="wa-filled wa-brand">Filled</button>
   <button class="wa-tinted wa-brand">Tinted</button>
   <button class="wa-outlined wa-brand">Outlined</button>
-  <button class="wa-text wa-brand">Text</button>
+  <button class="wa-plain wa-brand">Text</button>
 </div>
 <div style="margin-block-end: 1rem;">
   <button class="wa-filled wa-success">Filled</button>
   <button class="wa-tinted wa-success">Tinted</button>
   <button class="wa-outlined wa-success">Outlined</button>
-  <button class="wa-text wa-success">Text</button>
+  <button class="wa-plain wa-success">Text</button>
 </div>
 <div style="margin-block-end: 1rem;">
   <button class="wa-filled wa-warning">Filled</button>
   <button class="wa-tinted wa-warning">Tinted</button>
   <button class="wa-outlined wa-warning">Outlined</button>
-  <button class="wa-text wa-warning">Text</button>
+  <button class="wa-plain wa-warning">Text</button>
 </div>
 <div>
   <button class="wa-filled wa-danger">Filled</button>
   <button class="wa-tinted wa-danger">Tinted</button>
   <button class="wa-outlined wa-danger">Outlined</button>
-  <button class="wa-text wa-danger">Text</button>
+  <button class="wa-plain wa-danger">Text</button>
 </div>
 ```
 
diff --git a/docs/docs/essentials/dialog.md b/docs/docs/essentials/dialog.md
index 72d9fc895..e34535088 100644
--- a/docs/docs/essentials/dialog.md
+++ b/docs/docs/essentials/dialog.md
@@ -12,7 +12,7 @@ component: dialog
 <dialog id="dialog-overview">
 	<header>
 		<h2>Dialog</h2>
-		<button data-dialog="close" class="wa-text">✖️</button>
+		<button data-dialog="close" class="wa-plain">✖️</button>
 	</header>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <footer>
diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
index 60286027c..235aaf09c 100644
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -106,7 +106,7 @@ layout: page
 <wa-button variant="warning" appearance="outlined">Warning</wa-button>
 <wa-button variant="danger" appearance="outlined">Danger</wa-button>
 <br /><br />
-<wa-button appearance="text">Text</wa-button>
+<wa-button appearance="plain">Text</wa-button>
 <br /><br />
 <wa-radio-group label="Radio button group" name="a" value="1">
   <wa-radio-button value="1">Option 1</wa-radio-button>
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index a25c6a1cd..a4c487a29 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -534,7 +534,7 @@ hasOutline: false
         <wa-radio-button value="meteor"><wa-icon name="meteor"></wa-icon></wa-radio-button>
         <wa-radio-button value="cat-space"><wa-icon name="cat-space"></wa-icon></wa-radio-button>
         <wa-radio-button value="puzzle-piece"><wa-icon name="puzzle-piece"></wa-icon></wa-radio-button>
-          <wa-button value="[choose]" appearance="text" id="icon-chooser-trigger" class="logo-chooser">
+          <wa-button value="[choose]" appearance="plain" id="icon-chooser-trigger" class="logo-chooser">
             <wa-tooltip for="icon-chooser-trigger" distance="-3" hoist>Browse Icons</wa-tooltip>
             <wa-icon name="ellipsis" library="fa-classic-regular"></wa-icon>
             <wa-visually-hidden>Browse icons</wa-visually-hidden>
diff --git a/docs/docs/patterns/ecommerce.md b/docs/docs/patterns/ecommerce.md
index 997d96240..f54e17165 100644
--- a/docs/docs/patterns/ecommerce.md
+++ b/docs/docs/patterns/ecommerce.md
@@ -143,7 +143,7 @@ TODO Page Description
       <div style="font-size: small;">Off-white Jordan One</div>
       <div style="display:flex; justify-content: space-between; align-items: center;">
         <span>Qty: 1</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
+        <wa-button appearance="plain" size="small">Remove</wa-button>
       </div>
     </div>
   </section>
@@ -157,7 +157,7 @@ TODO Page Description
       <div style="font-size: small;">50/50 Cotton Poly Blend</div>
       <div style="display:flex; justify-content: space-between; align-items: center;">
         <span>Qty: 1</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
+        <wa-button appearance="plain" size="small">Remove</wa-button>
       </div>
     </div>
   </section>
@@ -171,7 +171,7 @@ TODO Page Description
       <div style="font-size: small;">100% Cotton</div>
       <div style="display:flex; justify-content: space-between; align-items: center;">
         <span>Qty: 1</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
+        <wa-button appearance="plain" size="small">Remove</wa-button>
       </div>
     </div>
   </section>
@@ -404,7 +404,7 @@ TODO Page Description
 
        <div style="display: flex;justify-content: space-between;align-items: baseline;">
         <span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
+        <wa-button appearance="plain" size="small">Remove</wa-button>
         </div>
     </div>
 
@@ -421,7 +421,7 @@ TODO Page Description
 
        <div style="display: flex;justify-content: space-between;align-items: baseline;">
         <span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
+        <wa-button appearance="plain" size="small">Remove</wa-button>
         </div>
     </div>
 
@@ -438,7 +438,7 @@ TODO Page Description
 
        <div style="display: flex;justify-content: space-between;align-items: baseline;">
         <span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
+        <wa-button appearance="plain" size="small">Remove</wa-button>
         </div>
     </div>
 
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 22d4235ee..c0a6a4f4f 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -73,7 +73,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The button's visual appearance. */
-  @property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' | 'text' = 'filled';
+  @property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' | 'plain' = 'filled';
 
   /** The button's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
diff --git a/src/components/page/page.ts b/src/components/page/page.ts
index 36e81f66c..94d12cab6 100644
--- a/src/components/page/page.ts
+++ b/src/components/page/page.ts
@@ -276,7 +276,7 @@ export default class WaPage extends WebAwesomeElement {
         </div>
         <div class="header" part="header">
           <slot name="navigation-toggle">
-            <wa-button part="navigation-toggle" size="small" appearance="text" variant="neutral">
+            <wa-button part="navigation-toggle" size="small" appearance="plain" variant="neutral">
               <slot name="navigation-toggle-icon">
                 <wa-icon name="bars" part="navigation-toggle-icon" label="Toggle navigation drawer"></wa-icon>
               </slot>
diff --git a/src/styles/depth/2_chunky.css b/src/styles/depth/2_chunky.css
index 826ab0a3a..0dc214bce 100644
--- a/src/styles/depth/2_chunky.css
+++ b/src/styles/depth/2_chunky.css
@@ -45,7 +45,7 @@ wa-button {
   --wa-transition-normal: 0ms;
   --wa-transition-fast: 0ms;
 
-  &:not([appearance='text']) {
+  &:not([appearance='plain']) {
     --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
       var(--box-shadow-color);
     margin-bottom: var(--wa-shadow-offset-y-s);
diff --git a/src/styles/depth/3_punchy.css b/src/styles/depth/3_punchy.css
index 797cb7fb4..366c214b2 100644
--- a/src/styles/depth/3_punchy.css
+++ b/src/styles/depth/3_punchy.css
@@ -40,7 +40,7 @@
 }
 
 /* #region Buttons */
-wa-button:not([appearance='text']) {
+wa-button:not([appearance='plain']) {
   --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
     inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
     inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
diff --git a/src/styles/depth/4_glossy.css b/src/styles/depth/4_glossy.css
index 6552cd6e4..c2b09cfa1 100644
--- a/src/styles/depth/4_glossy.css
+++ b/src/styles/depth/4_glossy.css
@@ -97,10 +97,11 @@
 /* #endregion */
 
 /* #region Buttons */
-wa-button:not([appearance='text']) {
+wa-button:not([appearance='plain']) {
   --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
     inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-    inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */, inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+    inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+    inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
     inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
 
   margin-bottom: var(--wa-shadow-offset-y-xs);
diff --git a/src/styles/themes/fa.css b/src/styles/themes/fa.css
index ef736192f..8409c96e5 100644
--- a/src/styles/themes/fa.css
+++ b/src/styles/themes/fa.css
@@ -504,7 +504,7 @@
     }
   }
 
-  wa-button:not([appearance='text']) {
+  wa-button:not([appearance='plain']) {
     --border-color: var(--text-color);
     --border-color-hover: var(--border-color);
     --border-color-active: var(--border-color);
diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css
index 484541ac0..f54621e03 100644
--- a/src/styles/utilities/appearance.css
+++ b/src/styles/utilities/appearance.css
@@ -37,8 +37,8 @@
   }
 }
 
-.wa-text,
-:host([appearance~='text']) {
+.wa-plain,
+:host([appearance~='plain']) {
   --background-color: transparent;
   --text-color: var(--wa-color-on-quiet);