From 4b4f2247c54cc4d7b99f139aedf0b0a809c11b50 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 7 Jan 2025 10:37:21 -0500
Subject: [PATCH] [Tag] Add `appearance`, closes #435

---
 docs/docs/components/tag.md | 43 ++++++++++++++++++++++++++++++++++++-
 src/components/tag/tag.css  |  6 +++---
 src/components/tag/tag.ts   |  7 +++++-
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md
index 2ffa18be8..b1d8919e0 100644
--- a/docs/docs/components/tag.md
+++ b/docs/docs/components/tag.md
@@ -15,9 +15,50 @@ icon: tag
 
 ## Examples
 
+### Appearance
+
+Use the `size` attribute to change a tag's visual appearance.
+The default appearance is `outlined filled`.
+
+```html {.example}
+<div class="wa-stack">
+<p>
+  <wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="brand" appearance="outlined filled">Outlined Filled</wa-tag>
+</p>
+<p>
+  <wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="success" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="success" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="success" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="neutral" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="warning" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="danger" appearance="outlined filled">Outlined Filled</wa-tag>
+</div>
+```
+
 ### Sizes
 
-Use the `size` attribute to change a tab's size.
+Use the `size` attribute to change a tag's size.
 
 ```html {.example}
 <wa-tag size="small">Small</wa-tag>
diff --git a/src/components/tag/tag.css b/src/components/tag/tag.css
index 6357e7849..aee336c20 100644
--- a/src/components/tag/tag.css
+++ b/src/components/tag/tag.css
@@ -6,11 +6,11 @@
   display: inline-flex;
   border-radius: var(--wa-border-radius-m);
   align-items: center;
-  background-color: var(--wa-color-fill-quiet);
-  border-color: var(--wa-color-border-normal);
+  background-color: var(--background-color, var(--wa-color-fill-quiet));
+  border-color: var(--border-color, transparent);
   border-style: var(--wa-border-style);
   border-width: var(--wa-border-width-s);
-  color: var(--wa-color-on-normal);
+  color: var(--text-color, var(--wa-color-on-normal));
   line-height: 1;
   white-space: nowrap;
   user-select: none;
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index ad21c2618..97353e89a 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { WaRemoveEvent } from '../../events/remove.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
@@ -27,13 +28,17 @@ import styles from './tag.css';
  */
 @customElement('wa-tag')
 export default class WaTag extends WebAwesomeElement {
-  static shadowStyle = [sizeStyles, variantStyles, styles];
+  static shadowStyle = [sizeStyles, variantStyles, appearanceStyles, styles];
 
   private readonly localize = new LocalizeController(this);
 
   /** The tag's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
 
+  /** The tag's visual appearance. */
+  @property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
+    'outlined filled';
+
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';