From 0a796d618f61f103174cb6fb64e93fa0ea7fb1e8 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:04:44 -0500
Subject: [PATCH] Badge appearances!

---
 docs/docs/components/badge.md | 37 +++++++++++++++++++++++++++++++++++
 src/components/badge/badge.ts |  3 ++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md
index 5f6001210..dd37b8558 100644
--- a/docs/docs/components/badge.md
+++ b/docs/docs/components/badge.md
@@ -22,6 +22,43 @@ Set the `variant` attribute to change the badge's variant.
 <wa-badge variant="danger">Danger</wa-badge>
 ```
 
+### Appearance
+
+Use the `appearance` attribute to change the badge's visual appearance.
+
+```html {.example}
+<div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="neutral">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="neutral">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled" variant="brand">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="brand">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="brand">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled" variant="success">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="success">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="success">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled" variant="warning">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="warning">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="warning">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
+</div>
+<div>
+  <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="danger">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="danger">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
+</div>
+```
+
 ### Pill Badges
 
 Use the `pill` attribute to give badges rounded edges.
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 16abe27a6..10c028e41 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import styles from './badge.css';
 
@@ -24,7 +25,7 @@ import styles from './badge.css';
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
-  static shadowStyle = [variantStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, styles];
 
   /** The badge's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';